multiple tweens/reverse

[Oxie]

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.

[Dipscom]

Hi Oxi,

 

Welcome to the forums!

 

For your first question, have a read at Carl's explanation in this post: http://greensock.com/forums/topic/12361-using-functions-to-build-a-timeline/

 

As for the second question, I am not sure I understand correctly what you are asking. Reverse:false, uh? Where? If you don't want the animations to play immediately, just add: {paused:true} to your timeline's constructor object.

[Oxie]

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.

[Dipscom]

I see now where the reverse:false comes from - ScrollMagic. I haven't worked with it myself, hence why it didn't click immediately.

 

Do you think you could setup a simple example Pen? It makes debugging a lot easier than guessing what could be wrong. Like I said, I haven't worked with ScrollMagic so, wouldn't know from the top of my head how it behaves.

 

Carl has a brilliant explanation video and post here. It is quite fun (for me) to hunt down bugs and misbehaviours from code. I would be quite happy to have a look at your pen.

 

[Oxie]

Hi,

 

Here is the pen 

See the Pen qbreQQ by anon (@anon) on CodePen

 

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]

Cool Oxie! On the case (just need to have a look at ScrollMagic a bit), hopefully the others are too busy with something ultra awesome and I can get to the bottom of this before one of them oust me.

 

[Dipscom]

Is this what you are after?

 

See the Pen bEWGjz by dipscom (@dipscom) on CodePen

 

The main thing I think you were not aware of is that you need a plugin in order to have ScrollMagic and GreenSock playing together.

 

The reason all your animation was playing in one go was that you were targeting the class name so, GSAP was simply picking everything at the same time and placing it together. I say you need to target the elements you want by ID rather than class.

 

If you want different bits of animation to run at different times, you have to make different timelines. I do not know enough of ScrollMagic to say if there is a way to call functions or not as you scroll along (if you know and can, you can make one long timeline, have it pause at the places you need and then, unpause them by calling a function).

 

I wish I had more hours in the day to go over all those things... I guess ScrollMagic is, too, going to go to my "to check one day" list...

 

Hope this will solve your issue.

[Oxie]

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);

[Dipscom]

It seems this is more of a ScrollMagic question, rather than a GreenSock one. (I hope the mighty CODE-GOD will not smite me from afar when I press "post" - forgive me oh mighty!)

 

Why is always a hard question to answer. There might be something else wrong on your code. Unless we can reproduce the error, we cannot really help. I have amended the pen I forked from you to something that, I think, resembles your question. It works fine for me. 

[Oxie]

Thanks a lot for your help