Jump to content
Search Community

Separate TimelineMax tweens on a timeline with Scrollmagic Pin

rcneil 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

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

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 6
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...