Search the Community

Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back. I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help. Thanks in advance! Ali

Hey everybody! I've wanted to make this effect where I'm twinkling two stars, but as you can see in my embedded Codepen at the time of writing, I could only have them animate once at a time. I want to know if it's possible to have both of these objects animate in a manner which is a split second after each other, e.g. first star fades in and out and then the second star fades in and out, and repeat. Thanks.

https://panike.pt/sustentabilidade/ Above website has really nice animation. If you see at the left side bullets. Those bullets gets filled with red when we scroll down and hover on them. They used top and translateY css property to achieve this but I am new to greensock and trying to create using greensock. Could you please help me. Thanks

I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning. Thanks

Hey guys, So I have a centered element, when I create a scene for that element and go to another page (same window, scroll a little) and then coming back, the element is not centered anymore. It is moved a little to the left, even though my tween has only up and down movement. I tried to replicate on codepen, doesn't work. The original site: https://alacreme.000webhostapp.com/alczzz3/index.html On the first page you see "pasiunea gustului..." that goes down when you scroll. This p is centered. Now scroll down, where you see a facebook link, click it, scroll down on it. Now go back to page and scroll up untill you see "pasiunea gustului" again it is not centered anymore, refresh to see. Sometimes it does it, sometimes it doesn't. The code for the centering of p: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); The code for the tween: tween_slogan_first = createTweenMoveVerticalEaseNone(slogan_first, 1, 0, $(slogan_last).parent().height(), 0); function createTweenMoveVerticalEaseNone(element, tween_time, opacity_var, distance) { return TweenMax.to(element, tween_time, { opacity: opacity_var, y : distance, ease: Linear.easeNone }); } The code for the scene scene_slogan_first = createScene($('#acasa'), 'onCenter', $(window).height()/2, $(window).height()/2, true, tween_slogan_first, false); function createScene($trigger, trigger_hook_var, offset_var, duration_var, reverse_var, tween, tween_changes) { return new ScrollMagic.Scene({ triggerElement: $trigger, triggerHook: trigger_hook_var, offset: offset_var, duration: duration_var, reverse: reverse_var }) .setTween(tween) // pins the element for the the scene's duration // .addTo(controller) // assign the scene to the controller .tweenChanges(tween_changes); }

Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.

Hi dear i have question .. i want to make website with full animation .. and i want to control all transitions . something like like below and i need have menu in top of my site and user after click on which of them something happen smoothly could you please how can i do it https://tympanus.net/Development/GridLayoutSlideshow/index2.html

Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily

Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!

I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment

Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers

I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's. I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy. I am wondering if there is anything I can do to up the performance. Link: http://melissamorgandesign.com/portfolio Here are the tweens that are going on, the trouble seems to be scaling the div/bgimage while scrolling with scrollto. Going horizontal also adds a wrinkle. TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}}); TweenMax.to("#div" + section, 1, {width:"60vw"}); TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0}); TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0}); TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1}); TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1}); TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1}); Any thoughts for smoothing this out?

Hi I have strange problem with an animation that I can't get my head around. I have an animation that is dependent on window size - a simplified codepen is above and simplified code below. Basically it's set so that if the window is greater than 1024px the animation fires, if it is less than 1024px the else part of the conditional logic is set to an animation lasting 0 seconds to effectively prevent the animation happening. I've predominately done this because the elements change dimensions quite markedly on mobile so the animation wouldn't really work. At first glance the above all works OK, and on the actual site I have the reverse: false; property on scroll magic so it only fires once (i've taken this off the codepen so you don't have to keep reloading the page). PROBLEM When the window is bigger than 1024px the animation fires (desired behaviour) When the window is less than 1024px animation does not fire (desired behaviour) When window is loaded above 1024px, and then the window is resized below 1024px, the animation still fires (not desired behaviour) Now, the normal solution would be to just add an event listener that triggers on a resize event, and pass the name of the function holding the tween into the event listener. However because the trigger is scroll magic, I can't do that because it creates a second instance of the function being called and basically doesn't work. The actual site is now finished and this is the final issue, I just seem to be going around in circles. Does anybody know how I can have it so when the window is resized after loading, the else part of tween takes priority and the tween effectively doesn't animate? P.S. In the future I'll just add an identical section that only shows on mobile, that is hidden on desktop and swap them out, but because this animation is happening on a wordpress site with a large homepage, I'd have to rename so many elements (and their equivalent stylesheet info and JS variables) because I've used the class names that are dynamically generated by the wordpress theme, and adding a new section basically changes the names of them. I can't believe I've got myself into such a ball-ache. As well as the simplified codepen, here is the simplified JS for quick reference function theAnimationTween() { if (window.innerWidth > 1024) { var tl = new TimelineMax(); tl.to("#box", 0.5, {x: 200}); } else { tl.to("#box", 0, {x: 0}); } return tl; } var controller = new ScrollMagic.Controller(); var blockScroll = new ScrollMagic.Scene({ triggerElement: "#box", triggerHook: 0, }) .setTween(theAnimationTween()) .addIndicators() .addTo(controller);

Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!

Hi Is it possible to add a staggerTo or staggerFrom to all the lines of text in a paragraph programmatically? I appreciate I could wrap all the lines in spans, but it's part of a piece of text that won't be fixed in size, so the number of lines will change dependent on device, window size. Also, is this a bad idea generally in terms of performance? I've included a codepen above with two paragraphs that are part of a stagger, but I was wondering about having each line stagger (note: if it is possible I would put all the text within one element / #id. I just did two elements in the example so i had something to stagger). Any ideas / suggestions welcome. Emily

I use Adobe Animate to put my canvases together, not sure if that makes a difference to what I am asking: I have the following code on my main timeline, and it works fine there, with buttons that are also on the main timeline. function buttonOver(theBtn) { thisBtn = theBtn; TweenMax.to(thisBtn, 0.1, { ease: Sine.easeOut, scaleX: 1.05, scaleY: 1.05 }); } However I am having difficulty doing the same thing within a child mc. I have a child clip that contains four buttons that I want to all use this function, and I hope to be able to keep this code within the child clip too, so that it becomes a self contained unit which I can reuse in different projects. I have tried several variations and none have worked. It doesn't necessarily throw an error, just no animation occurs. If I put a console.log in the function it sees and responds to that, it's just ignoring the tweens. I am not sure if it is because the child clip does not know what TweenMax is, or if I am targeting the buttons incorrectly, or something else entirely!

Hey guyz actually i want to apply the jquery events method like mouseover,mousedown,hover method ,etc . I tried to use it but scale function is working but ease:Elastic.easeOut is not working. I know this is very small problem for tweenguyz but please help mi in it.Sorry for my bad english. here is my codewhere i have use scale function but when i have use ease function its not working.PLease help mi

Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to('.js-logo__inner', 0.1, { fill: 'pink' }); innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' }); outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' }); outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' }); const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start'); const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end'); function changeLogoStart() { changeLogoStartTrigger.forEach((triggerStart) => { const sceneChangeLogoStart = new ScrollMagic.Scene({ triggerElement: triggerStart, reverse: true, triggerHook: 0.065, offset: 0, }) .setTween(innerStart) .setTween(outerStart) .addIndicators() .addTo(controllerMobile); }); }; function changeLogoEnd() { changeLogoEndTrigger.forEach((triggerEnd) => { const sceneChangeLogoEnd = new ScrollMagic.Scene({ triggerElement: triggerEnd, reverse: true, triggerHook: 0.015, offset: 0, }) .setTween(innerEnd) .setTween(outerEnd) .addIndicators() .addTo(controllerMobile); }); }; changeLogoStart(); changeLogoEnd();

On my site, I am using a plugin inView, which calls a function when an element has come into view in the page. There is a div in the middle of the page, and i'd like to use this to fade in it and come from the bottom TweenMax.from(element, 1.5, { autoAlpha: 0, y: 100, ease:Expo.easeOut }) The thing is it works, however if I quickly scroll down to this div, I'll see it for a millisecond, a quick flash....and then the effect starts. I tried to use the .set function and set it to autoAlpha: 0...however now it doesn't even fade in at all. Is there a solution to this problem? I'd like to use .from, however I do not want to see it flash quickly on the page before it starts the animation.

Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …

Hey there, i tried to set up a Codepen, but unfortunately i couldn't get it work ....i am basically using webpack and es6 promises as well as enqurie.js and scrollmagic with gsap to trigger different tweens/scenes and kill them when the breakpoint is changed, unfortunately i get a animation.tweenShowcaseDesktop.kill is not a function on a specific tween. Since i am not able to make it work in codepen here is the module where i trigger the tweens and scrollmagic : I know its a very long snippet and shot , but maybe someone will spot my mistake right away. thanks a lot guys and keep up the awesome work. animation.js import ScrollMagic from 'scrollmagic'; import 'animation.gsap'; import 'debug.addIndicators'; import TweenMax from 'TweenMax'; import 'EasePack'; // eslint-disable-line /* eslint-disable no-unused-vars, no-undef */ /** * ***************************************************************************** * Mobile */ export const controllerMobile = new ScrollMagic.Controller(); /** * Service Tiles Mobile */ export function triggerServiceMobile() { const serviceTileFigure = document.getElementsByClassName( 'js-service-tile__fig', ); for (let i = 0; i < serviceTileFigure.length; i += 1) { const sceneServiceMobile = new ScrollMagic.Scene({ triggerElement: serviceTileFigure[i], reverse: true, triggerHook: 1, offset: 0, duration: 280, }) .on('start', () => { serviceTileFigure[i].classList.add('js-service-tile__fig--is-active'); }) .on('end', () => { serviceTileFigure[i].classList.remove( 'js-service-tile__fig--is-active', ); }) // .addIndicators() .addTo(controllerMobile); } } /** * ***************************************************************************** * Desktop */ export const controllerDesktop = new ScrollMagic.Controller(); /** * Service Desktop */ export const tweenServiceDesktop = TweenMax.fromTo( '.c-service', 1, { autoAlpha: 0, scale: 1, y: 200 }, { ease: Power0.easeIn, autoAlpha: 1, scale: 1, y: 0 }, ); export function triggerServiceDesktop() { // const sections = document.getElementsByTagName('section'); const sceneServiceDesktop = new ScrollMagic.Scene({ triggerElement: '#trigger', reverse: false, triggerHook: 0.75, }) // .addIndicators() .setTween(tweenServiceDesktop) .addTo(controllerDesktop); } /** * Portfolio Desktop */ export const tweenShowcaseDesktop = TweenMax.staggerFromTo( '.c-showcase-item', 0.4, { autoAlpha: 0, scale: 0, y: 0 }, { ease: Power4.easeOut, autoAlpha: 1, scale: 1, y: 0 }, 0.3, ); export function triggerShowcaseDesktop() { const showcaseTiles = document.getElementsByClassName('c-showcase-item'); const sceneShowcaseDesktop = new ScrollMagic.Scene({ triggerElement: '.c-showcase', reverse: false, triggerHook: 0.5, }) // .addIndicators() .setTween(tweenShowcaseDesktop) .addTo(controllerDesktop); } and my entry where i import and trigger them: // Mobile Animationen enquire.register(breakpoint.forPhoneOnly, { match() { import('changeLogoColor') .then((changeLogoColor) => { changeLogoColor.default(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); import('animation') .then((animation) => { animation.triggerServiceMobile(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerMobile.destroy(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, }); // Desktop Animationen enquire.register(breakpoint.forTabletPortraitUp, { match() { import('animation') .then((animation) => { animation.triggerServiceDesktop(); animation.triggerShowcaseDesktop(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerDesktop.destroy(); animation.tweenShowcaseDesktop.kill(); animation.tweenServiceDesktop.kill(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, });

Hi, I have a menu trigger button that appears on a page in more than one place, so i've used classes as the selectors. I've worked out how to loop through the classes and toggle different functions to be called using an if else statement, but I can't seem to get this to work with tween max tweens. I've commented out a tween in the code below, which does the same as the vanilla javascript that is inside the same function, but i can't get it to work. How do i get a tween to be called as a current target? Any help would be awesome. Emily As well as the codepen above, here is the JS code for quick reference. var clicked = false; // sets the clicked state var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); // button to be clicked function newColor(e) { e.currentTarget.style.background = "black"; } function originalColor(e) { e.currentTarget.style.background = "red"; // e.currentTarget.TweenMax.to($mainMenuButton, 1, {background: 'red'}); } // loop through instances of the class and add functions dependent on the click state for (h = 0; h < $mainMenuButton.length; h +=1) { $mainMenuButton[h].addEventListener('click', function(e) { if (clicked === false) { newColor(e); clicked = true; // changed the clicked state } else { originalColor(e); clicked = false; } }); }

Hi, I am having problems animating with JavaScript. What I want the animation to do: All I want is that the logo, "TITLE" and navigation to have a fade in effect only (which it currently does fine). Problem: After the navigation element fades in, the logo and "TITLE" momentarily fades out and fades in again. I have been having a problem with Velocity.js as well. I think it might be something I am doing wrong. Any help on this would be appreciated. Thanks

Edit: See below for the most legible version of the code! Hello, I'm trying to play a tween whenever the user stops scrolling. Eventually I'll play from 0-1 on scrolling down, and from 1-0 on scrolling up. Currently I'm experiencing some unexpected behavior however. See the code below. The `ScrollMagic.Scene` tells the component whether the user is scrolling up or down, and `scrollStop()` is calling the arrow callback whenever the user stops scrolling. Contrary to my tween config, the scene ignores `paused: true` and moves `.yellowHollowCircle` 400px immediately on pageload (much faster than the 2 seconds it should be taking). Scrolling up and down yields the console.logs seen in the attached screenshot, and no further movement. Do you understand why `.play(0)` is not playing the tween from the beginning like I expect? const reverb = function(object, amount = 10, time = randomBetween(2, 3), timeMax){ let tweenName = object + 'ReverbTween' + this._reactInternalInstance._debugID, sceneName = object + 'ReverbScene' + this._reactInternalInstance._debugID; if (!this.controller) this.controller = new ScrollMagic.Controller(); if (timeMax) time = randomBetween(time, timeMax); this[tweenName] = TweenMax.to(object, time, { transform: `+=translateY(${amount}px)`, ease: Power3.easeOut, paused: true }); this[sceneName] = new ScrollMagic.Scene({ offset: 0, duration: 1 }) .triggerHook(1) .on('update', e => { let { scrollPos } = e, { lastScrollPos } = this.state; let scrolling = lastScrollPos > scrollPos ? 'up' : 'down'; this.setState({ lastScrollPos: scrollPos, scrolling }); }) .setTween(this[tweenName]) .addTo(this.controller); } // just calls callback once user stops scrolling const scrollStop = function ( callback ) { if ( !callback || Object.prototype.toString.call( callback ) !== '[object Function]' ) return; var isScrolling; window.addEventListener('scroll', function ( event ) { window.clearTimeout( isScrolling ); isScrolling = setTimeout(function() { callback(); }, 66); }, false); }; class SuperFunTime extends React.Component { constructor(props) { super(props); this.reverb = globals.reverb.bind(this); } componentDidMount(){ this.reverb('.yellowHollowCircle', 400, 2); globals.scrollStop(() => { console.log('stopped scrolling ' + this.state.scrolling, this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].progress()); this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].play(0); }) } }