Help trying to tween 3 different divs

[jmcn]

if i  tween two of the elements and comment out the third it works but when i try all three tweens the timing gets thrown off and it doesn't work

 

 

 

 

 

controller.addTween(

 '.learn-info',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info'), .5, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 100 // scroll duration of tween

);

 

 

controller.addTween(

 '.learn-info2',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info'), .7, 

       {css:{right: 0}, immediateRender:true}, 

       {css:{right: -730}}),

     TweenMax.fromTo($('.learn-info2'), .9, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 1000 // scroll duration of tween

);

 

controller.addTween(

 '.learn-info3',

 (new TimelineLite())

   .append([

     TweenMax.fromTo($('.learn-info2'), .7, 

       {css:{right: 0}, immediateRender:true}, 

       {css:{right: -730}}),

     TweenMax.fromTo($('.learn-info3'), .9, 

       {css:{right: 730}, immediateRender:true}, 

       {css:{right: 0}})

 

     

   ]),

 2000 // scroll duration of tween

);

[Jonathan]

Hello jmcn, Welcome to the GreenSock Forums!

• Are you using the latest version of GSAP JS - 1.11.2?

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>

There was a change to the TimelineLite and TimelineMax (ActionScript and JavaScript) API:

 

http://www.greensock.com/v12-api-change/

 

append() becomes add() .. have you looked at using the add() method?

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

 

add() - Adds a tween, timeline, callback, or label (or an array of them) to the timeline.

 

Examples of use:

 //add a tween to the end of the timeline
 tl.add( TweenLite.to(element, 2, {left:100}) );
 
 //add a callback at 1.5 seconds
 tl.add(func, 1.5); 
 
 //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
 tl.add("myLabel", "+=2");
 
 //add another timeline at "myLabel"
 tl.add(otherTimeline, "myLabel"); 
 
 //add an array of tweens 2 seconds after "myLabel"
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 
 
 //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
 tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);

Is there a way you can provide a

See the Pen by pen (@pen) on CodePen

or jsfiddle code example so we can see your code in context with HTML, JS, and CSS. This way we can see the timing that is off for the 3 divs in your code.

 

Thanks

[Carl]

I'm guessing if you have multiple fromTo() tweens on the same element you don't want to have immediateRender:true on all of them. That forces tweens that are created later to overwrite settings in previous tweens on that element.

 

try this

 

controller.addTween(
 '.learn-info',
 (new TimelineLite())
   .append([
     TweenMax.fromTo($('.learn-info'), .5, 
       {css:{right: 730}, immediateRender:true}, 
       {css:{right: 0}})


     
   ]),
 100 // scroll duration of tween
);




controller.addTween(
 '.learn-info2',
 (new TimelineLite())
   .append([
     TweenMax.fromTo($('.learn-info'), .7, 
       {css:{right: 0}, immediateRender:false}, 
       {css:{right: -730}}),
     TweenMax.fromTo($('.learn-info2'), .9, 
       {css:{right: 730}, immediateRender:true}, 
       {css:{right: 0}})


     
   ]),
 1000 // scroll duration of tween
);


controller.addTween(
 '.learn-info3',
 (new TimelineLite())
   .append([
     TweenMax.fromTo($('.learn-info2'), .7, 
       {css:{right: 0}, immediateRender:false}, 
       {css:{right: -730}}),
     TweenMax.fromTo($('.learn-info3'), .9, 
       {css:{right: 730}, immediateRender:true}, 
       {css:{right: 0}})


     
   ]),
 2000 // scroll duration of tween
);

Try setting immediateRender:false on all but the first fromTo() tween of any element as shown above.

 

If that doesn't help, please provide a simple demo as Jonathan advised, preferably one that doesn't rely on SuperScrollorama. Its best to focus on GSAP API questions without any 3rd party tools. 

[jmcn]

I'll try and put it on codepen. I want the tweens to work on scroll? right now the .learn-info and .learn-info2 are over lapping.