There is a hey template in which the animation is implemented via the ScrollMagic and TweenMax libraries. The customer wants to make a smoother scrolling so that the animation when scrolling the diva to the end plays itself, as is done in the top menu.

I found a function in the code that is responsible for scrolling in the top menu:

 function scrollTo(event) { var target = $(this).attr('href').split('#'); controller.scrollTo('#' + target[target.length - 1]); event.preventDefault(); }

How would I modify it now so that it gets called when the main section div ends?

1 answer 1

In ScrollMagic, the duration of an animation is set by the duration property. For example, in your code:

 var scene = new ScrollScene({ triggerElement: section, triggerHook: 1, duration: settings.height })

If you set duration: 0, the animation will play when the triggerElement trigger is activated.

To see the labels of triggers, add .addIndicators () to each scene, for example:

 var scene = new ScrollScene({ triggerElement: section, triggerHook: 1, duration: settings.height }) .addIndicators()

And connect the script http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js You can read about ScrollMagic in Russian ScrollMagic - Creating an animation when scrolling through a page