Search the Community

Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!

I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that background images is what I had desired. I have the position attribute set to 0 so they fire simultaneously. What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out. The duration attribute is overridden because of Scrollmagic, so what can I do? Should I try to chain together TimelineMax() tweens? Should I create 2 pinned elements and overlay them on top of one another? You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens. I have experimented with a lot of variations but my understanding is limited. Any help is greatly appreciated.

Hi Guys, I've built a quick codepen for reference but basically as you scroll down the page text fades in and also the background ( bigger text) image fades in. I've somewhat got it working but I need the active class to be removed on the background image when the next one fades in. At the minute the all just stack. Thanks

Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.

Hi guys, I'm trying to animate this svg to give the effect as it lifted off the background. In this pen I tried to animate the scale and the drop shadow and the animation is triggered with scrollmagic. I have set the initial drop shadow in the CSS as advised by Dipscom here but the drop shadow doesn't animate. What am I doing wrong? If this effect can't be achieved this way is there another way to approach it? thank you

Hi Guys, I have 4 fullscreen sections on a page (using fullpage.js). I'm trying to animate the background gradient of the body every time users scroll through each section. Animation duration should be tied to the scrollbar position. I have pre-set colors to use for each section that I have put into an array. My idea is to get the id of the section currently in view and pass this into the colorize function to get the corresponding colors for the gradient. I'm stuck here. Thanks in advance

I have in the attached codepen a very simple animation, where I want the '.delivery' box to appear when the trigger is initiated. Not as soon as the page loads, which is what currently happens. Thanks for any help.

Hi there, I got a weird issue. Somehow, my SVG path is appearing outside the SVG scope. Could be my messy javascript (if anyone has tips on how to do it cleaner, please). The SVG in the yellow box should be right in the center. Anyone know how to fix this? Thanks!

Hi, My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help. I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements being separate, but hopefully this is enough to explain my issue. Expected behaviour: Scroll down the page - section 1 animation staggers out, section 2 animation staggers in. Scroll down again, section 2 animation staggers out, section 3 animation staggers in. Scroll back up the page - section 3 animations staggers out, section 2 animation staggers in. Again, section 2 animation staggers out, section 1 animation staggers in. I have created a function for fadeIn and fadeOut, and I then create another function "section2Anim", "section3Anim" that is a timeline containing both fadeout and fadein, in order for these two to happen at exactly the same time. (It's not visible on my demo because I don't have the element pinned, but on my pinned version, doing them at the same time basically means one set of dots appear to transform into the next set of dots. Problem: So, I found that the smoothest way to do this, which worked super well for me, when scrolling down the page, is method one, creating section2Anim as a function, and then applying it to the scrollmagic scene. This is this bit of my code: var section2Anim = function () { var tl = new TimelineMax(); tl .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); return tl; }; new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working nicely scrolling down the page in my first codepen, however it does not work in reverse when scrolling up : I have found that the only way to make it work in reverse too, is to not use the function and instead directly assign section2Anim to be the new TimelineMax. like this : var section2Anim = new TimelineMax(); section2Anim .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working both forwards and backwards in my second codepen : So why not just use the latter method, you ask? Well my problem is, as soon as I use this latter method instead in my client code, my animation starts not working properly from the outset, it leaves some of the dots behind (the SVG circles), and doesn't fully trigger the animation. It seems to get stuck and lag, even when just scrolling down. After a while of scrolling it may start to work smoothly. What I am confused about is that in my first method, assigning the function, the animation works really smoothly which is what I want! But I just need it to work in reverse... and because this is all fairly new to me and I am not the best at Javascript anyways (more of a CSS gal), I am confused about why one way reverses and the other way doesn't. I should mention I have also tried some other things with the second method, like pausing the timeline, then playing it on enter of the scroll magic scene, sadly it was still laggy. I appreciate my demo does not show the lagginess or leftover dots, because I had to cut them down for the demo, so maybe this seems fine. But I just can't wrap my head around why the first method, assigning the function of "section2Anim" to the scroll magic scene, works so nicely, but doesn't reverse, whilst the second does reverse, but doesn't work nicely in my actual code. Any help at all much appreciated, thanks so much. Panda

Hi, I just started out working with GASP, taking baby steps. The first thing I wanted to do, was to use ScrollMagic to draw a SVG path (inside a container) as the page is being scrolled through. I heavily relied on this ScrollMagic example when setting this up. This is my current script: // Prepare SVG function pathPrepare_journey($el) { var lineLength_journey = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength_journey); $el.css("stroke-dashoffset", lineLength_journey); } var $journey1 = $("path#path1"); var $journey1_2 = $("path#path2"); var $journey1_3 = $("path#path3"); pathPrepare_journey($journey1); pathPrepare_journey($journey1_2); pathPrepare_journey($journey1_3); // Reference to container var container = $("#section1"); var containerHeight = $(container).height(); var vpHeight = $(window).height(); // Init controller var SVGcontroller_journey = new ScrollMagic.Controller(); // Build tween var tween_journey = new TimelineMax().add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); // Build scene var scene = new ScrollMagic.Scene({ triggerElement: container, duration: containerHeight - vpHeight / 2, tweenChanges: true }) .setTween(tween_journey) .addIndicators({ name: "Draw Journey Lines#1", colorTrigger: "brown", colorStart: "brown", colorEnd: "brown", indent: 600 }) .addTo(SVGcontroller_journey); It works perfectly fine, but as you can see, I have three individual paths inside my SVG ($journey1, $journey1_2 & $journey1_3), and the ScrollMagic scene currently only draws one of them, $journey1, because I was only able to add that one to the TimelineMax(). My simple question: How do I add the other paths so they are drawn at the same time as $journey1? I was able to add the other paths, but they are being drawn consecutively: // Build tween var tween_journey = new TimelineMax() .add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ) .add( TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); I appreciate any help with this. Thanks.

Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="current"><a href="#part1" >Part1</a></li> <li><a href="#part2">part2</a></li> </ul> </div> I need a smoth scroll when user click on the below anchor tag. <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Would you help me out in this issue?

Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which in turn, prevents the explicit usage/designation of transform: scaleX() to alter the width to/from through the TimelineMax().to properties. A summarized snippet of where I'm managing this configuration can be seen below: // ... const ScrollLines = new TimelineMax() .to( animate.down, 1, { x: animate.neg, y: animate.pos, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) .to( animate.up, 1, { x: animate.pos, y: animate.neg, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together"); // ... Actual question: Is there a way to alter the width of an element while still utilizing the core matrix3d calculation in TimelineMax? You can see the current implementation of this animation on youcanwa.org, or view the demonstration here. Any suggestions or help would be much appreciated!

Hey guys, all day I've been trying to find a solution to the animation choppiness on retina display (most noticeable in Chrome, though present also in Safari/FF...) - when I move the window from MB Pro 13" display to my external 24" screen (1920x1200), it's all smooth... ? I know that transforms of full-screen images ain't ideal, but they're compressed to about 200kB each (1920px by 1920px) - besides that, even when I use smaller images (720px, about 50kB), the problem persists. I've tried swapping the divs with background-images for regular imgs, but no luck there... Also I've rearranged the timeline to eliminate as much simultaneous tweens as possible... CSSPlugin.defaultForce3D = false didn't help either whereas turning it on (true) seemed to help a tiny bit, as well as disabling the easing by TweenMax.defaultEase = Linear.easeNone. The thing is I came across several posts regarding the "retina issue" but no solution unfortunately. Video demonstration here: https://youtu.be/HieVenfcsWI (screen recorder makes it worse than it actually is - non-retina is 100% smooth, retina is a bit smoother) Code here: http://ideup.cz/krouzek2 (there is nothing else but ScrollMagic with GSAP) Any ideas would be really appreciated Thanks a lot!

Hello. Thanks as always for the awesome product! This problem is driving me nuts, and i know this includes Scrollmagic, but can you just tell me WHY this doesn't work? I'm sure you've seen it before and maybe have a simple answer. WHAT IS SUPPOSED TO HAPPEN My svg animation is supposed to play on init, then when i scroll up, the animation reverses, and when I scroll back down, it plays again. Here's a pen of just the animation and some play and reverse buttons that is working as it should without scrollmagic. THE PROBLEM Once I define the reverse tween for scrollmagic (even using pause:true) it shows the svg statically on init, it won't play. Here's my pen that just won't work: Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated!

Hello, I am using Greensock animation for smooth scroll clicking on the menu. I have three pages which are `menu.php, index.php, terms.php`. Now I am on `index.php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. No issue on the index page. Now I am on `terms.php` page from there If I click on the about menu then it's not redirecting on the id. I am getting the URL like `http://localhost/test-menu/terms.php#contact` URL should be displayed `http://localhost/test-menu/index.php#contact` Hope you all understand my issue. Would you help me out in this? In the `menu.php` page, I added my menu code which is <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> In the `index.php`, I added the code which is <?php include('menu.php'); ?> <section id="about"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="services"> <h2>Service</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/plugins/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> In the `terms.php`, I added the code <?php include('menu.php'); ?> <section> <h2>terms</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> GSAP smooth scroll script /** Smooth Scrolling Functionality **/ $(document).ready(function() { // Init controller var controller = new ScrollMagic.Controller(); // Change behavior of controller // to animate scroll instead of jump controller.scrollTo(function(target) { TweenMax.to(window, 2, { scrollTo : { y : target-65, // scroll position of the target along y axis autoKill : true, // allows user to kill scroll action smoothly }, ease : Cubic.easeInOut }); }); // Bind scroll to anchor links $(document).on("click", "a[href^=#]", function(e) { var id = $(this).attr("href"); if($(id).length > 0) { e.preventDefault(); // trigger scroll controller.scrollTo(id); // If supported by the browser we can also update the URL if (window.history && window.history.pushState) { history.pushState("", document.title, id); } }; }); }); **Css** ul{margin: 0;padding: 0;list-style: none;} ul li{display: inline-block;margin: 10px;} section{min-height: 500px;}

Hello, I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom. I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?

Hello, I have a problem with my first ScrollMagic Animation. I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation. It's like some kind of setting is missing. Do you have an idea what exactly is missing? This is my codepen: Thanks, Becca

Hello i have question. How to setTween to many different elements?? var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_1", {top: "-100px"}) // the tween durtion can be omitted and defaults to 1 .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller);

I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered how much of these JS libraries are overlapping each other in toolkits and effectiveness. My knowledge of anything past design, UI/UX, and basic front end JavaScript starts to become limited. So I have to ask, is it possible to control the GreenSock + Lottie animation using ScrollMagic? And perhaps more importantly, should I be animating using this workflow at all? Current Progress: ------------------------------- If you're interested in seeing my initial journey to get all 3 integrated I have documented it below... (Unfortunately I don't have CodePen pro so I wasn't able to put this all together in a Pen for viewing, if it's something that becomes necessary I will go ahead and get CodePen pro and do so.) Research: Integrating TimelineMax, with Lottie Web, and Controlling w/ ScrollMagic I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library as you can see from the sample below. var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; var anim = lottie.loadAnimation(animData); A Singular Example of Controlling Lottie w/ GreenSock I have been looking high and low for documented of examples of people successfully integrating with GreenSock and Scroll Magic with very limited results. I have found one excellent video on YouTube of a dev by the name Chris Gannon (who I suspect may be a member of these forums) successfully controlling a Lottie animation through TimelineMax but that is about it. My Attempts to Recreate This, and Add ScrollMagic Control Have not gone very well... I believe that the current state of my code (mostly able to get this far thanks to the work of Chris Gannon) is missing some vital information on the Lottie animation itself. How many frames does the animation have? The relation of scroll position to frame selection. Pushing that data through to TimelineMax to effectively control animation. My goal being to control the animation with a Tween, Duration Tween, or a Reversed Tween. The code below is my hack-job trying to get this all working; i'm currently dealing with an error from this code "Uncaught ReferenceError: animationControl is not defined". jQuery(function($) { //Lottie animation Window and Data wrapper var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; //Lotie animation trigger var anim = lottie.loadAnimation(animData); anim.setSpeed(1); //TimelineMax Lottie animation control $('#animationWindow').each(function(){ var animationControl = new TimelineMax({}); animationControl.to({frame:0}, 4, { frame:anim.totalFrames-1, onUpdate:function(){ anim.goToAndStop(Math.round(this.target.frame), true) }, repeat: -1, yoyo: true, ease:Linear.easeNone }) }); //ScrollMagic Scene var controller = new ScrollMagic.Controller(); var icon_scene = new ScrollMagic.Scene({triggerElement: "#animationWindow_trigger", triggerHook: 'onEnter'}) .setTween(animationControl) .addTo(controller); }); And this is my current state of affairs. I will be updating this post as I move along, and eventually - hopefully come up with an elegant solution to this.

Hello there, I'm new in Tweening... Does someone here know how to update Tween settings on window resizing when Tween progress is > 0 ??? I created an horizontal slider with ScrollMagic and Tweenmax and I tried to update dimensions and Tween settings on resize but even if I kill Tween, reset and refresh Scene it only works when Tween progress is 0... Thanks for your help ! Alex

Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.

Hi guys, I'm struggling to get scroll magic & multiple timelines to work together. The first timeline plays but the other 2 seem to start out of view. Checked this against a few examples and it looks pretty much the same but all I can find are tween examples. If anyone can see the problem here that would be fantastic. Cheers, Smallio

Hello! I'm pretty new and still learning GSAP, which is pretty awesome and powerful. I've been working on a horizontal website so as you scroll, animations are being triggered based on the scrolling position. I've combined GSAP with Scroll Magic to achieve this. You can see the site here - http://maric.launchcatapult.com/ I have 5 main sections Home, WePartner, WeAdvise, WeServe, and WeEmpower. I've created a cross over transition, which you can see towards the end and after all of the animation is completed of the "We Partner" section. During this cross over transition animation, how can I make the timeline jump to the very start of the next section, which would be the "We Advise" section then continue on its animation from there? Another example that I've been looking at is from http://tram-house.com/. After you insert the key into the hole, they have that circular transition, then after that animation is complete it takes you to the beginning of the next section (also provided screen shots). Can any one direct me onto the right path to achieving this same thing? I know the tram-house.com site is using a canvas instead, but I know little to none about how to animate and draw shapes within canvas. That's why I'm just tweening svg shapes instead. Thanks!

https://staging.thebirdthebear.com/ I'm working on this particular animation, and having some issues. It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic. You can see it working properly on the first iteration in the section "OUR CRAFT." Each branch is being revealed by removing the respective mask. My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN." The masks in the SVG are called out as IDs, but the paths inside the masks are Classes (they're what are being called here in the code below). I'm not sure if that's the issue or what... Thoughts? const branchDraw = function() { const layerOneMask = document.querySelectorAll(".layeronemask") const layerTwoMask = document.querySelectorAll(".layertwomask") const layerThreeMask = document.querySelectorAll(".layerthreemask") const layerFourMask = document.querySelectorAll(".layerfourmask") const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) } } branchDraw()

I'm new to GSAP. Can anyone help me figure out why my animation is running before it's triggered by ScrollMagic?