TrevorRice

Here's a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010 Thanks for the replies guys. Sorry it took so long to get this Pen put together. Hopefully this will make more sense. I tried stripping it down to only the essentials, but it is still bit complicated. Essentially what I am doing creating a little traversable carousel-timeline-thing that users will be able to interact with. Each large-box and small-box pair have their own Timeline. A Timeline with progress 0 indicates that the large-box will be to the left of the visible large-box container and the small-box will be below the visible small-box container. A Timeline with progress 1 indicates that the large-box will be to the right of the visible large-box container and the small-box will be below the visible small-box container. So, I initialize all of the large boxes to the left of the visible large-box container and all of the small boxes below the visible small-box container except for the Timeline associated with the last item of each container, which has a progress of 0.5; meaning they are visible. Now, pressing the Prev button will control the progress of the current timeline and the destination timeline causing the boxes to go in and out of view. If you notice the large boxes go left and right and the small boxes go up and down depending on which button you click. What I want is for the current small box to ALWAYS go up-and-out and the incoming small box to ALWAYS come from below-and-in. I understand with the way it is built right now, progressing a Timeline from 1 -> 0.5 causes the transformation to be reversed. Is there a way I can avoid this? Would I have to nest timelines?

Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010

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.

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.