Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

GSAP + ScrollMagic and one way animation

Started by salamandr, Apr 21 2017 11:17 AM gsap scrollmagic

Best Answer PointC, 21 April 2017 - 01:50 PM

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.

:)

Go to the full post


3 replies to this topic
salamandr

Post #1 by salamandr , 21 April 2017 - 11:17 AM

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




  • Back to top

PointC
  • PointC
  • 2,544 Likes (Superhero)
  • 1,230 posts

Post #2 by PointC , 21 April 2017 - 01:50 PM   Best Answer

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.

:)


If you only travel from point a to point b, you won't find me because I'm PointC.

Real name: Craig | Home base: Seattle area
Forum answers: always well-intentioned, usually accurate, not necessarily guaranteed.

CodePen: http://codepen.io/PointC/  |  Twitter: https://twitter.com/Craig_PointC

  • Back to top

salamandr

Post #3 by salamandr , 21 April 2017 - 02:21 PM

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


  • Back to top

mikel
  • mikel
  • 70 Likes (Contributor)
  • 83 posts

Post #4 by mikel , 21 April 2017 - 02:28 PM

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.


  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement