Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nathan Harold

Grouping Tweens in Timeline

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

Greetings,

 

I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code:

 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
	perspectiveTimeline = new TimelineMax();

	perspectiveTimeline
		.to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } )
		.from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } )
		.to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } )
		.to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } )
		.from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } );

 

Thanks much.

Link to comment
Share on other sites

Thanks to the amazing documentation of GreenSock, I have found the solution. I just add a position parameter at the and of each tween. At the end: 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
	perspectiveTimeline = new TimelineMax();

	perspectiveTimeline
		.to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut }, 0 )
		.from( '#as-perspective-bg--mountain--02', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 0 )
		.to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: 0, scaleY: 0, scaleX: 0, x: '-40vw', y: '-70vh', ease: Power4.easeOut }, 1 )
		.to( '#as-perspective-bg--mountain--02', 4, { width: '180vw', scaleY: .6, scaleX: .6, x: '-40vw', y: '-28vw', ease: Power4.easeOut }, 1 )
		.from( '#as-perspective-bg--desert', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 1 );

 

But I do have another question, it may sound stupid. While using ScrollMagic is there point to add a second to the tween?

  • Like 1
Link to comment
Share on other sites

3 hours ago, Nathan Harold said:

While using ScrollMagic is there point to add a second to the tween?

 

Hm, I didn't quite understand the question - are you wanting to change the duration (to add 1 second)? (Disclaimer: I don't really have experience with ScrollMagic so I may not be the best person to answer if it's a ScrollMagic-specific one). 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

 

Apologies for not being clear. Since using the GSAP with ScrollMagic we are depending on the animation on the scroll, right? So what is the point of using duration ( in second )? I have noticed that when I change the duration, the animation also changes but I couldn't figure out the pattern and the reason.

 

~

Nathan.

Link to comment
Share on other sites

Hi @Nathan Harold :)

 

Welcome to the forum.

 

When you have ScrollMagic hijack the tween/timeline duration you have to think in ratios or percentages. Here's a really basic example:

 

 

See the Pen WavQNg by PointC (@PointC) on CodePen

 

You'll see three boxes on a timeline. All three start at the same time and move 500px on the x axis. They each have a different duration. (Red:1, Green:5, Blue:10) The duration of the timeline is 10 seconds. I've set the ScrollMagic duration to 50% of the window height. Since the blue box tween has a duration of 10 seconds, it takes the full scroll distance to complete its animation. Whereas the green duration is 5 so it takes 50% of the scroll distance and the red with a duration of 1 only takes 10% of the scroll distance to finish. 

 

It doesn't really matter what duration you set in ScrollMagic. You'll still see the same ratio in the above scenario. Blue:100% of the scroll distance, Green: 50% of the distance and Red:10% of the distance.

 

When you have a whole timeline that has sequential tweens, the same thing happens. Say you have this timeline:

 

tl.to (".red", 3, {x:500});
tl.to (".green", 1, {x:500});
tl.to (".blue", 1, {x:500});

 

The total duration of that timeline is 5 seconds. So the red box will take 60% (3/5) of the scroll distance and the green and blue boxes will each take 20% (1/5) of the scroll distance to complete. Again it does not matter if the ScrollMagic duration is 100px or 10,000px, the percentage of the scroll distance for each of the tweens to complete remains the same.

 

Make sense?

 

Happy tweening.

:)

 

 

  • Like 4
Link to comment
Share on other sites

Hi @PointC,

 

Thank you for this detailed explanation. It's crystal clear. You have saved me 53 lines of codes :) Much appreciated.

 

~

Nathan.

  • Like 2
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.
×