Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rcneil

Separate TimelineMax tweens on a timeline with Scrollmagic Pin

Recommended Posts

I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in.

 

I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing.

 

I have an animation where I want background images sliding up on one half and sliding down on the other half.  I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too.  Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element.  The timing I have for that background images is what I had desired.  I have the position attribute set to 0 so they fire simultaneously.

 

What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out.  The duration attribute is overridden because of Scrollmagic, so what can I do?  Should I try to chain together TimelineMax() tweens?  Should I create 2 pinned elements and overlay them on top of one another?  

 

You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens.  I have experimented with a lot of variations but my understanding is limited.  Any help is greatly appreciated.  

See the Pen xQEEyP by rcneil (@rcneil) on CodePen

Link to comment
Share on other sites

You can create two timelines then add them to master timeline at position 0.

 

master.add(tl1, 0);
master.add(tl2, 0);

 

  • Like 2
Link to comment
Share on other sites

Can I chain TweenMax "fromTo", though?  Like this?

 

var master = new TimelineMax();

var tl1 = TweenMax.fromTo(".frame.frame2", 1, {y:  "0%"}, {y: "300%", ease: Linear.easeNone}, 0) 
	.fromTo(".frame.frame1", 1, {y:  "0%"}, {y: "-300%", ease: Linear.easeNone}, 0)
	.fromTo(".frame.frame4", 1, {y:  "-100%"}, {y: "200%", ease: Linear.easeNone}, 0)
	.fromTo(".frame.frame3", 1, {y:  "100%"}, {y: "-200%", ease: Linear.easeNone}, 0)
	.fromTo(".frame.frame6", 1, {y:  "-200%"}, {y: "100%", ease: Linear.easeNone}, 0) 
	.fromTo(".frame.frame5", 1, {y:  "200%"}, {y: "-100%", ease: Linear.easeNone}, 0) 
	.fromTo(".frame.frame8", 1, {y:  "-300%"}, {y: "0%", ease: Linear.easeNone}, 0)
	.fromTo(".frame.frame7", 1, {y:  "300%"}, {y: "0%", ease: Linear.easeNone}, 0);	

master.add(tl1);

 

I have tried created them both as new TimelineMax() timelines and then adding them to a master, but that doesn't work, even with implicitly setting position to 0.  They still run one after another... 

 

See the Pen xQEEyP by rcneil (@rcneil) on CodePen

 

Edited by rcneil
updated Codepen
Link to comment
Share on other sites

48 minutes ago, rcneil said:

Can I chain TweenMax "fromTo", though?  Like this?

 

Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent.

 

See the Pen aQmjYb?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

 

48 minutes ago, rcneil said:

They still run one after another... 

 

That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.

 

See the Pen rQMrrE?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Sahil, this makes a lot of sense.  Thank you for explaining everything and providing examples.  I have just started to scratch the surface of what GSAP can do but this definitely points me in the right direction.  Cheers!

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