Timeline fromTo paused: true unexpected

[TrevorRice]

Hi there!

 

I'm trying to create a very simple 'carousel' using GSAP's TimelineLite that I will be controlling with buttons and dragging/swiping. Initially, all items of the 'carousel' will be translated -100% to the left of the viewport except for the current item, which will be translated 0%.

 

let $items = $('.container').children();


function init() {
  initTimelines($items);
}


function initTimelines(items) {
  for (let i = 0; i < items.length; i++) {
    if (i === items.length - 1) {
      createTimeline(0.5, items[i]);
    } else {
      createTimeline(0, items[i]);
    }
  }
}


function createTimeline(progress, elem) {
  let tl = new TimelineLite({ paused: true });


  tl.fromTo(elem, 1, { x: '-100%' }, { x: '0%' })
    .fromTo(elem, 1, { x: '0%' }, { x: '100%' })
    .progress(progress);


  return tl;
}


init();

All I'm doing is looping through the divs with .item as a class and creating a timeline for each one. If it is the last .item, I'd like for it to start halfway through the timeline. In the future I'll be controlling the timelines through the progress method from drag/swipe and click callbacks.

 

You'll see that when I create the TimelineLites setting paused:true all of the .items are on top of each other in the viewport. Since the first line of the timeline is fromTo(elem, 1, { x: '-100%' }, { x: '0%' }), I would expect those .items to be translated -100% until I play the timeline or set its progress to something other than 0.

 

Now, in that createTimeline function, if I set progress to be 1, everything is translated 100% like I would expect. If it is 0, however, the items aren't translated -100%. Why is this?

 

If you toggle paused: true to paused: false, you'll see the timelines work, but it flashes from 0% then translates to -100% and plays the rest of the timeline.

 

I hope that makes sense. If you need anymore clarification let me know. 

See the Pen xEBwPj by TrevorRice (@TrevorRice) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

 

If I understand correctly you need to set immediateRender:false on the second tween since you have 2 fromTo() tweens fighting to control the same properties of the same element as soon as they are created.

tl.fromTo(elem, 8, { x: '-100%' }, { x: '0%' })
    .fromTo(elem, 8, { x: '0%' }, { x: '100%', immediateRender:false})
    .progress(progress);

http://codepen.io/GreenSock/pen/YGgGzm

 

When I set paused to true or false in that timeline I get the same results.

 

Please check out this video

 

 

[TrevorRice]

Wow, thank you! I guess I didn't fully understand immediateRender because I was trying to set it to false on the first fromTo tween when I was trying out different things.