GSAP + ScrollMagic and one way animation

[salamandr]

Hi,

I am working with GSAP + ScrollMagic. There in codepen when you scroll to bottom you can see "eating animation" it is sprite animation based upon shifting background. Well my problem is visible when "burger is gone" and you try to scroll up. You will see backward animation of eating which in my case is not what I want. Is there a way how to play some animations only in "one way"? Idealy completly avoid "eating" animation when you go up.

 

I tried to google it and search, but without result, if it is already answered please send me link.

 

Thx

See the Pen wdGNwe by salamandr (@salamandr) on CodePen

[PointC]

Hi salamandr 

 

Welcome to the forum.

 

You just need to set your scene reverse to false like this:

    new ScrollMagic.Scene({
         triggerElement: '.magic',
         triggerHook: 'onLeave',
         reverse: false
     })

If you have multiple scenes with similar setups, you can also set that (& other properties) globally when you create the controller like this:

var ctrl = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave',
    addIndicators: true,
    reverse: false
  }
});

Happy tweening and scrolling.

[salamandr]

thx that works. Now I know I have to cut my projejct to more scenes, but this helped me

[mikel]

Hi salamandr,

 

in addition to the reverse: false option it could be helpful to arrange this scene so that it contains only the "eating process".

So if you split the last scene the complete burger may be still there scrolling up.

 

Hopefully my 'English' explanation can give a hint ...

 

Scroll the burger

Manfred

 

Opps - a liitle bit to late.