Jump to content
GreenSock

TrevorRice

Timeline fromTo paused: true unexpected

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 2
Link to comment
Share on other sites

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.

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