Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrollmagic'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hello Everyone I am new to GSAP and have a created a few animations however, I have reached a point where I am stuck. I have created an animation in Greensock however, I don't want my animation to play until that particular section on the page is reached or at least when the section reaches the middle of the viewport. I have used Tween Max to create the animation. At the moment the animation plays as soon as the page loads, but I only want it to play once that particular Div is reached or it within the middle of the viewport. How do I pause the animation from the start until I reach that section then play it? I have attached a codepen for reference. Any help on this would be greatly appreciated Thank-you Sam
  2. Hey, I'm currently working on a project with GSAP and scrollmagic. I want to create sections that has scroll animations inside with scrollmagic. So a section freeze for the time other animations came into. Is this section over it should smooth scroll to the next section. I call that somehting like scrollytelling. 1. each section has a story like on scroll there are elements that coming in part a part. 2. if a section has ended the story it should scroll to the next section without effects, like a normal onpager 3. it should be navigatable via next/prev buttons and dots for each section 4. all sections sould be responsive, so I can create querys for tablet/desktop/XL-desktop screens Here the stack where I have a screenshot and detailed information: Stackoverflow I attached a codepen with sections and the beginning of my scrollmagic. Maybe someone has done a similar project or could help me a bit. I want to show first results until the end of next week. Here is a image how it should look: http://codepen.io/muuvmuuv/pen/PbXXXr
  3. Hi, I'm creating an animated website with scrollMagic and I'm using the following animations: <a href="http://www.scrollmagic.io/examples/expert/bezier_path_animation.html">http://www.scrollmagic.io/examples/expert/bezier_path_animation.html</a> <a href="http://www.scrollmagic.io/examples/advanced/svg_drawing.html">http://www.scrollmagic.io/examples/advanced/svg_drawing.html</a> <a href="http://www.scrollmagic.io/examples/basic/simple_pinning.html">http://www.scrollmagic.io/examples/basic/simple_pinning.html</a> It's an onepage website so I'm using them all at once. But when I run the examples on the scrollMagic website in safari there running as smooth as possible. But then when I run the website I'm working on, I have to wait something like 10 seconds before even something appears. Then I wanna scroll, cuz that's when the magic comes in. u see what I did there? But then when I scroll, the new content also loads only after too many seconds Can somebody tell me why and what I'm doing wrong? The website is http://wordpress.webdesignwiljan.nl I'm also placing divs as stars in the sky, already removed it and it didn't make a difference I'm also drawing an live canvas clock even just a simple jQuery fadeIn takes too long.. var map1, map2, map3, map4, map5 = null; var browser = null; var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // At least Safari 3+: "[object HTMLElementConstructor]" var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection if (isOpera) { browser = "animations"; } else if (isFirefox) { browser = "animations"; } else if (isSafari) { browser = "animations"; } else if (isIE) { browser = "animations"; } else if (isChrome) { browser = "animations"; } else { browser = "animations"; } window.alert(browser); document.body.className = browser; $(function () { // wait for document ready $(".loading-view").delay(1000).addClass("loaded"); var nightSky = document.querySelector(".nightSky"); var cloudSky = document.querySelector(".cloudSky"); var SkyWidth = nightSky.offsetWidth; var nightSkyHeight = nightSky.offsetHeight; var cloudSkyHeight = cloudSky.offsetHeight; window.onresize = function () { SkyWidth = nightSky.offsetWidth; nightSkyHeight = nightSky.offsetHeight; cloudSkyHeight = cloudSky.offsetHeight; } var placeStars = function () { var stars = 1000; for (i = 0; i < stars; i++) { var x = Math.floor(Math.random() * SkyWidth); var y = Math.floor(Math.random() * nightSkyHeight); // console.log("x: " + x + " | y: " + y); var star = document.createElement("div"); star.className = "star"; star.style.left = x + "px"; star.style.top = y + "px"; nightSky.appendChild(star); } } var placeClouds = function () { var existingClouds = cloudSky.querySelectorAll(".cloud"); var maxClouds = 10; var clouds = 3; var cloudSizes = 5; var cloudIndexes = 5; for (i = 0; i < clouds; i++) { if (existingClouds.length < maxClouds) { var duration = Math.floor(Math.random() * (120 - 50 + 1) + 50); // var x = Math.floor((Math.random() * SkyWidth) + 1); var y = Math.floor((Math.random() * cloudSkyHeight) + 1); // console.log("x: " + x + " | y: " + y); var cloud = document.createElement("div"); cloud.className = "cloud"; cloud.style.animationDuration = duration + "s"; console.log(duration); // cloud.style.left = x + "px"; cloud.style.top = y + "px"; var cloudSize = Math.floor((Math.random() * cloudSizes) + 1); switch (cloudSize) { case 1: cloud.className += " cloudBig"; break; case 2: cloud.className += " cloudNormal"; break; case 3: cloud.className += " cloudSmall"; break; case 4: cloud.className += " cloudNormal"; break; case 5: cloud.className += " cloudSmall"; break; } var cloudIndex = Math.floor((Math.random() * cloudIndexes) + 1); switch (cloudIndex) { case 1: cloud.className += " front"; break; case 2: cloud.className += " mid"; break; case 3: cloud.className += " behind"; break; case 4: cloud.className += " mid"; break; case 5: cloud.className += " behind"; break; } cloudSky.appendChild(cloud); console.log("New cloud"); existingClouds = cloudSky.querySelectorAll(".cloud"); } } } if (browser != "no-animations") { setInterval(function () { placeClouds(); }, 20000); // Mountain Bike scroll animation var bikepath = { start: { curviness: 1.25, autoRotate: true, values: [ {x: 0, y: 250}, {x: 300, y: 260}, {x: 550, y: 230}, {x: 800, y: 290}, {x: 1100, y: 330, scaleX: 1, scaleY: 1}, // {x: 900, y: 80}, // {x: 1300, y: 60}, // {x: 1500, y: 30}, {x: 1800, y: 100, scaleX: 0.5, scaleY: 0.5}, // {x: 2004, y: 85}, {x: 2100, y: 70} ] } }; // init controller var controller = new ScrollMagic.Controller(); var controller2 = new ScrollMagic.Controller(); // create tween var tween = new TimelineMax() .add(TweenMax.to($("#mountainbike"), 9, {css: {bezier: bikepath.start}, ease: Power1.easeInOut})) // .add(TweenMax.to($("#mountainbike"), 4, {css: {bezier: bikepath.end}, ease: Power1.easeInOut})); // build scene var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 1300, offset: 100}) .setPin("#target") .setTween(tween) // .addIndicators({name: "Bike bezier"}) // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 650, offset: 500}) .setPin(".earth") // .addIndicators({name: "earth (duration: 100)"}) // add indicators (requires plugin) .addTo(controller2); var scene3 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 650, offset: 500}) .setPin(".sky") // .addIndicators({name: "sky (duration: 100)"}) // add indicators (requires plugin) .addTo(controller2); // ANIMATING LOGO PLANT function pathPrepare($el) { $el.css("stroke-dasharray", 2000); $el.css("stroke-dashoffset", 2000); } var $base = $("path#base"); pathPrepare($base); var controller = new ScrollMagic.Controller(); var tween = new TimelineMax() .add(TweenMax.to($base, 0.9, {strokeDashoffset: 0, ease: Linear.easeNone})) // draw word for 0.9 .add(TweenMax.to("path", 1, {stroke: "#286f2d", ease: Linear.easeNone}), 0); // change color during the whole thing var scene = new ScrollMagic.Scene({triggerElement: "#logoTrigger", duration: 400, tweenChanges: true}) .setTween(tween) // .addIndicators() // add indicators (requires plugin) .addTo(controller); } else { $('body').append("<i class='fa fa-info info-btn'></i>"); $('i.info-btn').on('click', function () { alert("Voor een optimale ervaring raden wij u aan deze website in Chrome of Firefox te bekijken."); }); } nightSky.onload = placeStars(); // $('#openProject.tree').on('click', function () { // var id = $(this).data("id"); // $('body').addClass("locked"); // $(".projectDetailsContainer .projectDetails[data-id="+id+"]").addClass("open").fadeIn(function() { // // MAPS // var map = new GMaps({ div: "#map"+id, lat: -12.043333, lng: -77.028333 }); // map.setCenter(-12.043333, -77.028333); // map.addMarker({ // lat: -12.043333, // lng: -77.028333 // }); // // $(window).resize( function () { // map.refresh(); // map.setCenter(-12.043333, -77.028333); // }); // }); // }); $('#closeProject, .projectDetails:after').on('click', function () { $(".projectDetailsContainer .projectDetails.open").removeClass("open").fadeOut(); $('body').removeClass("locked"); }); $('.cloud.details').on('click', function () { $('.cloudSky, .detailedSky .detailedCloud').css("cursor", "pointer"); $('.nightSky *:not(.star)').fadeOut(1000); var id = $(this).attr("data-id"); console.log(id); $('.detailedSky .detailedCloud[data-id="' + id + '"]').fadeIn(1000).addClass('active'); $('body').addClass('locked'); }); $('.detailedSky .detailedCloud.active, .cloud.details').on('click', function (e) { e.stopPropagation(); }); $(document).on('click', function (e) { $('.detailedSky .detailedCloud').fadeOut(1000); $(this).removeClass('active'); $('.nightSky *:not(.star)').fadeIn(1000); $('body').removeClass('locked'); $('.cloudSky, .detailedSky .detailedCloud').css("cursor", "inherit"); }); }); // CLOCK var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'black'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius * 0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius * 0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (num = 1; num < 13; num++) { ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius) { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour = hour % 12; hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60)); drawHand(ctx, hour, radius * 0.5, radius * 0.07); //minute minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60)); drawHand(ctx, minute, radius * 0.8, radius * 0.07); // second second = (second * Math.PI / 30); drawHand(ctx, second, radius * 0.9, radius * 0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0, 0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }
  4. Hi! I'm using GSAP with ScrollMagic on a one-page site I'm developing. To scroll to a particular section I'm using the scrollTo plugin and it's working great but I need it to have an offset when it scrolls so the heading doesn't scroll under the nav. scrollTo helpfully provides an 'offsetY' property but for some reason it's not working for me. No matter what offset I put in, it scrolls to the same position. There are no console errors though. You can see it not working on the linked codepen demo. Here's the specific line: TweenMax.to(window, 0.5, {scrollTo: {y: newpos, offsetY:70}}); Any idea what I'm doing wrong? TIA! David
  5. You can see from my codepen that I have a logo on my website that fades out as you scroll down the page. I only want to do this on mobile and mobile screen sizes. I'm using scrollmagic with this also. Does anyone know how to set this up so the effect will only work on mobile and screen sizes < 768px. I'm fairly new to JS and so would appreciate baby steps. thanks
  6. Hi, this is probably a dumb question, sorry if that's the case! I'm currently using wow.js and animate.css to add some movement to a site I'm working on. It's really easy to implement, i.e. if I want a div to fade in from the left (when you have scrolled down the page so that the div becomes visible on screen) I add the following:- <div class="wow fadeInLeft">some content here</div> It's so simple to impliment. I'm wanting to use scrollmagic and GSAP to add parallax to my website and wondered how easy it would be to use them to also replace my wow animations. I guess my question is.... is there a way I can add a class name to a div and get GSAP to animate it based on what the class name is. Cheers, Philip
  7. I am missing something that I know should be easy for someone well experienced. I have only a couple of months of web design experience. I have a intro timeline and another one trigger on scroll. Both attach to a scrollmagic controller. The intro should finish before the user scroll down. I tried to overflow: hidden on y axis etc... doesn't work. But hidden the scrollbar is not good User experience. IF the intro played completely the first scene is good and reverse fine. But when the user scroll down to the first scene (of 6 scene total) and the intro is not done everything break down when the reverse of intro is triggered. And if windows is refresh on scene1. The intro start. IS there a way to somehow reset the intro timeline if the user reverse back on intro when they scroll down to scene1. And to lock the intro animation when refresh on scene1 or scene2 ...3....Maybe it's a scrollmagic coding but maybe greensock has a specific code to resolve this http://codepen.io/dominium/pen/zKyZZd Thanks in advance
  8. Hi! I have a task: to make animation like on this page (where block with the phone and tablet is scrolled slowly then block with the text). http://flatata.com/en Try to apply this technique http://bassta.bg/demos/tweenmax-text-animations/index10.html, but no success. I made many attempts, but my result is still doesn't work correctly. How to trigger animation and how to control scrolling speed of images. Any idea? Many thanks in advance for any help. Igor.
  9. Hello, We've been scratching our heads on the following problem for a few days now and wonder if someone can help. We have a series of elements (dots in this case) and attempting to create a sort of fisheye effect where the dots at a certain point in the screen get larger. I've created the following Codepen, that shows the type of effect we are trying to achieve. (Though the grouping needs tightening up) https://codepen.io/Seanom/pen/qaKBXX I toyed with the duration but found that if the user scrolls too fast then events are skipped. I really like the animation effect on the above pen but it has been pointed out that we don't know the height of these pages so in theory adding 5000+ dom elements to a page and then animating them all using scroll magic and GSAP could be a performance issue. We have started to move this over to canvas as think that may handle the redraw events in a more effective way. This is very much a work in progress but shows where I am up to at the moment. I have attempted to call a tweenmax.to and animate the dots as they are redrawn but the animation occurs once per page load. https://codepen.io/Seanom/pen/YGvzgO?editors=1010 Is it possible to have the animation trigger each time the canvas redraws the dots. Hopefully that makes some sense, if it does can anyone help or point me towards some useful material. Thanks in advance Sean I've gone over the following threads, but have not been able to apply anything I could get to work http://greensock.com/forums/topic/7393-how-do-i-reset-a-tween/ http://greensock.com/forums/topic/11740-advice-on-scrollmagic-timelinemax-collisiondetection/ http://greensock.com/forums/topic/7996-engine-update-frequency/ http://greensock.com/forums/topic/7786-how-can-i-hijack-requestanimationframe/
  10. senna

    Section slides

    Hello, I'm working on a schoolproject and I would like to use something like this: http://scrollmagic.io/examples/advanced/section_slides_manual.html I made this code, but it's acting weird. http://codepen.io/codesen/pen/bwogPj Want I want: when you scroll, one page moves to te left and the next page comes in to the screen with a little scaling. I used a timeline for this. What is happing: when you scroll all page are thrown on top of each other, the backgroundcolors disappear and everything moves to the left. Not really what I was expecting. I hope you can tell me why this is happening!
  11. Hello, I have a question about triggering tweens with the ScrollMagic plugin I created a ScrollMagic page where I animated with CSS, but I prefer to do transform ect with GreenSock. The problem is that when I want to trigger tweens, it doesn't work. This is the code: http://codepen.io/codesen/pen/LRLEYZ I also have a WORKING code, but this is with CSS animation, and not what I want: http://codepen.io/codesen/pen/RGpyGz I used this as an example: http://scrollmagic.io/examples/basic/simple_tweening.html I think the problem is in line 10: .setTween("#project01", 0.5, {backgroundColor: "green"}) I hope you can help!
  12. Hello there, I'm having a issue with ScrollMagic and I need your assistance. If you scroll down to the section with the guy with glasses you'll see that section gets jittering. What I am doing wrong? Thanks in advance!
  13. Hi, I created an animation using GSAP and ScrollMagic which is working great, but I can't figure out how to adjust the initial position of the stage/graphics (before the user triggers the animation). Currently, I am calling the .setPin method on a container element with the class of 'stage'. This stage element is inside of a larger parent container (#how-it-works) which is the triggerElement for the animation: var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation); The issue I'm having is that the stage element is first seen at the top of the parent container, and I would like for it to just be vertically centered within the parent container prior to the animation being triggered. To get a better idea of what I'm describing, see my codepen at http://codepen.io/BillKroger/pen/bwNXZV (make sure to scroll down) Any help with this is greatly appreciated!
  14. I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? As of right now my project has like 2000 lines of JavaScript and I'm not even finished! In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. Thanks in advance and have a great day everyone! Kind regards, -Bruno
  15. I am trying to implement a carousel slider of bootstrap and want the caption to animate when the slider is active. It does animate for first slide but not for others. Below is my code: // Slider var controllerSlider = new ScrollMagic.Controller({vertical: false}); jQuery('.carousel-inner .item').each( function() { var tlSlider = new TimelineMax() .from( jQuery(this).find('h1'), 3, { x: -50, autoAlpha: 0,}) .from( jQuery(this).find('h2'), 3, { y: -50, autoAlpha: 0,}); var scene = new ScrollMagic.Scene({triggerElement: jQuery(this) }) .setTween(tlSlider) .addTo(controllerSlider); });
  16. Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once I bet it's possible, and that I do something terribly stupid Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must. Any help will be more than welcome !
  17. Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies. I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far. I am enqueue the scripts in my functions file like: function my_theme_scripts_function() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true ); wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true); } add_action('wp_enqueue_scripts','my_theme_scripts_function'); then just for testing have tried using the below in my scripts file: var controller = new ScrollMagic.Controller(); var myTest = new ScrollMagic.Scene({duration: 200}) .triggerElement('#hero1') .setTween(testTween) .addIndicators() .addTo(controller); but I keep getting the same error: scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference. Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible) Cheers D
  18. Hi GSAP's! I have 2 <section>'s. As the vistor scrolls, I'd like to fade in the second section. On that second section, there's a hyperlink. The problem: The hyperlink is already clickable before the second section is visible. Please hover the bottom area of the first (green) section on my CodePen URL to see what I mean. Is there a way to activate the hyperlinks as soon as the second section is completely visible? Thanks in advance
  19. Hi All, I'm fairly new to JS, so I'm sure I've made a silly mistake. But I am unable to get a morph tween to trigger using ScrollMagic. What I want to do is fairly simple, I have an svg ribbon made up of three paths, I want to morph the first two into the third as a user scrolls. I've watch and read lots of tutorials, but can't see where I am going wrong. Thank you in advance. Ritch
  20. I am new to all this so please forgive any issues or formalities I seem to not follow or understand. I tried putting my stuff in a codepen as requested but it does not work at all when I did so not sure what I did wrong there. i use Google Chrome and Firefox to try and toubleshoot my code but still learning there as well. I am on a MacBook Pro using El Capitan OS. The issue I had was after scene 3 my animations would not work yet the first few scenes worked great. You can see it in action if you like at http://justawebbie.com/centennial/index.html. I am just not sure what I did wrong I went over the code to see if I misplaced a comma or bracket but do not see one thing out of whack. Please and thank you for any help anyone can offer to a newbie.
  21. Mustana


    Hi, I am useing scroll magic for first time and i got stuck.... everything works fine but what when i click on buttons(social media, design, etc... ) the scroll should get disable and normal animation should play without scrolling and when scroll again my animation should get active on scroll... Please see below link to have an idea http://fbapps.ae/centric_2016/ thanks in advance for help! Mustafa
  22. Hi all - I know there are some keen scrollmagic'ers on here so thought it ok to give it a post. The problem i'm having is setting up multiple instances of Scrollmagic using an each statement. In the attached pen they all seem to be following the one call instead of their individual states. Any pointers kind folks?
  23. Hey all! I'm VERY new to GSAP and ScrollMagic but now using both in some capacity. I was wondering if anyone can help me as I want to create a universal ScrollMagic function/controller to then trigger my already created GSAP animations at the correct point on scroll. I'm really hoping this can be done so I can maybe include a class (like 'animate-me') in the HTML which then triggers the animation when scrolling past. A lot of this will be content managed to it need to flexible. I've done this in the past using the more simple WOW.js, obviously not with GSAP though. Cheers, Richard
  24. I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!
  25. Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">'; for (var i = 0; i < num; i++) { var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />'; thinLineArr.push($(line)); svg += line; }; svg += '</svg>'; transitioncontainer.append(svg); //Starting Scrollmagic var timeline = new TimelineMax() for (var k = 0; k < num; k++) { timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0})); } var scene = new ScrollMagic.Scene({ triggerElement: "body", duration: 1000, offset: 100 }) .setTween(timeline) .addTo(scrollMagicController);