Jump to content
Search Community

How GSAP tween duration works with ScrollMagic scene duration?

honestbitchnosorry test
Moderator Tag

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

var wipeAnimation = new TimelineMax()
		.fromTo("#half",    1, {y:  "100%"}, {y: "0%", ease: Linear.easeNone})  // in from right
		.fromTo(".swipe.two",    1, {y:  "0%"}, {y: "-100%", ease: Linear.easeNone})  // in from right
		.fromTo(".swipe.three .subslide",    1, {y:  "0%"}, {y: "-100%", ease: Linear.easeNone})  // in from right
		
	// create scene to pin and link animation
	new ScrollMagic.Scene({
			triggerElement: "#pinContainer",
			triggerHook: "onLeave",
			duration: "500%"
		})
		.setPin(".swipes")
		.setTween(wipeAnimation)
		.addTo(controller);

 

Take that code for example. wipeAnimation has 3 tweens, each with 1s duration. The scene has a duration of 500%. How exactly is the duration of the animation fits with the scene duration? What is the animation triggered? When do the second tween and third tween start?

Link to comment
Share on other sites

Welcome to the forum. :)

 

In your scenario the tween duration is irrelevant as the whole timeline is hijacked by ScrollMagic. You could set each tween to 100 seconds and the result would be the same. The duration of 500% represents 5 times the window height. 

 

Where the tween duration is relevant is determining the percentage of the whole animation. In your case each tween is 1/3 of the total so each will complete over 33.33% (166% window scroll) of the ScrollMagic duration. If the first tweens were 0.5 and the third stayed at 1, then the outcome would be different. The first two would take 25% of the scroll and the last tween would take 50% of the scroll. 

 

The other consideration when performing tweens based on user scroll is to set the ease to Linear. You've already done that, but I thought I'd mention it. 

 

Make sense?

 

Happy tweening.

:)

 

  • Like 4
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...