en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en nl en sv en en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en fr en de en pt en pt en en en es en es en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
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 can make a CodePen if that would help.
See the Pen ?editors=1010 by TrevorRice (@TrevorRice) on CodePen
Hello TrevorRice, welcome to the GreenSock Forum!
Could you please provide a codepen so we can test your code live. This way we can better understand your question in context.
Share on other sites
GreenSock    17,215 Likes (Superhero)
Posted October 27, 2016
I'm a little confused - so let's say the timeline plays forward, you're fine right? And what exactly you you expect to happen if the timeline goes backwards? Are you saying the elements[1] object wouldn't change its state at all? So it'd remain stuck at -100%? And then what about when the timeline plays forward again? It still stays stuck at -100% or would it suddenly jump back to 100% and start moving again (but only if/when the playhead of the timeline is moving forward)? I just need some help understanding your goal here. You can certainly kill() that tween or pause() it anytime (maybe do it in an onComplete if you want it to stop working after the first play forward).
Share on other sites
TrevorRice    0 Likes (Newbie)
Posted October 31, 2016
See the Pen ?editors=1010 by TrevorRice (@TrevorRice) on CodePen
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?
Share on other sites
Carl    10,905 Likes (Superhero)
Posted November 1, 2016
I think here you have a case where playing and reversing the same timeline is not a good idea, especially because the reverse of the intro animation is not what you want.
I would recommend that you instead call functions that create the animations that you need when you need them.
Your code is a bit complex for me to wrap my head around right now but maybe something like:
animateIn(box) {  // create timeline that moves the current small box up and positions the requested "box" on the bottom and moves it up. }
Share on other sites
GreenSock    17,215 Likes (Superhero)
Posted November 1, 2016
Yep, I've gotta agree with Carl (assuming I understand your question correctly). I believe you're overcomplicating things by trying to bend over backwards to reuse the same timeline to produce various different results. It's probably cleaner to just create the animation you need at the moment you need it. Don't worry - when a timeline finishes it'll automatically make itself eligible for garbage collection and the whole system is optimized for top-notch performance so you don't need to feel like you're doing something bad/wrong by firing off a new tween/timeline each time you need one.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Don't reverse tween in timeline
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.