Jump to content
GreenSock

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

rcneil

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by rcneil

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

     

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

×