salamandr

GSAP + ScrollMagic and one way animation

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

:)

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.