Oxie

Thanks a lot for your help

Thank you very much - this solves the first problem I still have got the other one (was trying to create a codepen but not sure if it can fully explain the problem) I'll explain again. I've got 5 elements with a class of '.storeitem' which fade in from the bottom when triggered. However the animation is played back when scrolling up, which I don't want.If I add reverse(false) the animation plays only once and is disabled when scrolling back up (which is what I want) BUT for some reason it starts straight after the page is loaded rather than waiting until the trigger element is reached. I cannot understand why. Here is the code again: /* store animation*/ var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: ".storelocator", triggerHook: 'onEnter', offset: 250 }) .setTween(TweenMax.staggerFromTo('.storeitem', 1, { opacity: 0, delay: 0.5, ease: Back.easeInOut, y: 300 }, { opacity: 1, y: 0 }, 0.3 ) )//.reverse(false) .addTo(controller);

Hi, Here is the pen http://codepen.io/anon/pen/qbreQQ Basically the red and blue divs move at the same time . The first (red) div is OK but I want the blue one to move on scroll. Thanks.

Dipscom, Thanks for your help - I've created a function and now it is much neater. However, now the animation starts at the same time for both elements, triggered by onEnter for the first element, and I need to apply animation to the 2nd element as I'm scrolling further down. Regarding the second question: If my scene is var scene = new ScrollMagic.Scene({ triggerElement: ".storelocator", triggerHook: 'onEnter', offset: 250}).setTween(tween).addTo(controller); the triggers work fine and the elements appear when I want them to. However, if I scroll back up, the animation plays again in reverse. I don't want this, so I use reverse:false: var scene = new ScrollMagic.Scene({ triggerElement: ".storelocator", triggerHook: 'onEnter', offset: 250, reverse:false}) .setTween(tween).addTo(controller); It works - it doesn't play animation when I scroll back up. However, for some reason it ignores triggers and plays animation as soon as the page is loaded. I tried your suggestion: var tween = new TimelineMax({paused:true}); but then no elements appears at all. Thanks.

Hello, I am very new to GSAP and have two questions: 1) I have got elements that are repeated in different places on the page (.animatedTxt, .animatedImg) and I would like to apply the same animation to them as I'm scrolling down. At the moment it seems to be applying the correct animation only to the second element with the classes above. /* store animation*/ var controller = new ScrollMagic.Controller(); var tween = new TimelineMax(); tween.insert (TweenMax.staggerFromTo('.storeitem', 1, { opacity: 0, delay: 0.5, ease: Back.easeInOut, y: 300 }, { opacity: 1, y: 0 }, 0.3 ) ); var scene = new ScrollMagic.Scene({ triggerElement: ".storelocator", triggerHook: 'onEnter', offset: 250, reverse:false}) .setTween(tween).addTo(controller); /*smallImg flying in*/ var tween1 = new TimelineMax() tween1.insert(TweenMax.staggerFromTo('.animatedImg', 2, { opacity: 0, delay: 0, ease: Back.easeInOut, x: -300 }, { opacity: 1, x: 0 } ) ); tween1.insert(TweenMax.staggerFromTo('.animatedTxt', 2, { opacity: 0, delay: 0, ease: Back.easeInOut, x: 500 }, { opacity: 1, x: 0 } ) ); // build scene var sceneSmallImg= new ScrollMagic.Scene({ triggerElement: ".animatedImg", triggerHook: 'onLeave', reverse:false, offset:200}) .setTween(tween1).addTo(controller); 2) reverse:false in the first part of my code (store animation) does the job of playing animation once, however, it plays it straight away on page load and ignoring the offset and the triggers. It also seems to me that a lot of the code is repeated. Is there a way of making it more concise? I would appreciate any help on these. Thanks.