Jump to content
Search Community

GSAP + ScrollMagic and one way animation

salamandr test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

Link to comment
Share on other sites

  • Solution

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
Link to comment
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.

Link to comment
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.
×
×
  • Create New...