Edify Technologies

That's very clean. Super helpful and probably a good shift in how I think about animations. Thanks so much!

@GreenSock I think I've somehow over complicated it too. My real world scenario is pretty basic, I'm trying to make a toggle button that animates to an "on" state using an elastic ease, and then animates to an "off" state with the same elastic ease (not the reverse of that ease, but actually a new ease). I realize I could do something like: const tl = gsap.timeline({ paused: true }) tl .addLabel('start') .to('#box', { duration: 1, ease: 'elastic.out(1, 0.5)', rotate: '135deg' }) .addLabel('mid') .to('#box', { duration: 1, ease: 'elastic.out(1, 0.5)', rotate: '0deg' }) // back to start position .addLabel('end') // on click, move to "on" state with elastic.out tl.tweenFromTo('start', 'mid') // on next click, move to "off" state with elastic.out tl.tweenFromTo('mid', 'end') However, this method feels heavy handed, since my actual timeline has a bunch of to calls that would need to be copied. I was hoping to find a solution that is a little more DRY. yoyoEase: true seems to do what I want to do, but it's not working consistently. What you might be missing in my last post is if you press the trigger button three times (wait for the animation to complete between each press) - the first two presses work as expected, but the third press causes the animation to run backwards. It's the `elastic.out` ease in reverse.

@GreenSock thanks! I hadn't wrapped my head around time vs totalTime. I was able to animate totalTime with this: const duration = 3 const tl = gsap.timeline({ paused: true, yoyo: true, repeat: 1, }) tl.to('#box', { duration, xPercent: 100, ease: 'elastic.out(1, 0.3)', yoyoEase: true, }) $('#btn').click(() => { if (tl.totalTime() === duration) { gsap.fromTo(tl, { totalTime: duration, }, { ease: 'none', totalTime: duration * 2, duration, }) } else { gsap.fromTo(tl, { totalTime: 0, }, { ease: 'none', duration, totalTime: duration, }) } }) This works for the first two clicks, but on the third click, when it should be animating from totalTime 0 to 3 again, it seems to run backwards. I suspect this is because totalTime of 0 & 6 are the same thing and the animation is running in reverse from 6 to 3? https://codepen.io/sallf/pen/dydqbGw

I'm trying to create a single timeline that uses yoyoEase: true so that it has an elastic.out bounce in both directions. The animation is triggered on click, so I assumed using tl.tweenFromTo() would work. However tweening from 0 to duration / 2, and from duration / 2 to duration seems to just repeat the same animation, as if the yoyo doesn't exist. On first click I would expect this to run to the end of the initial animation, and on second click to run the yoyo. Is there a better method than tweenFromTo for this? https://codepen.io/sallf/pen/dydqbGw

Thanks @GreenSock! Ya, that paradox totally makes sense. And, removing repeat: -1 fixes the problem.

Checkout the codepen. If you use the buttons to set timeline progress(), you can go back and forth between 0 and 0.5 no problem, but as soon as you go to 1, you can't get back to 0. I've experimented with other values as well, and everything seems to work until you go to 1 for the first time. After that, when you try and return to 0 it reevaluates to 1. Does this look like a bug, or do I have my logic wrong? Thanks!

Ya, I don't think so either now that I understand it better. Also, for anyone following along, I think the actual work around for this situation is something like this (not what I had above): let transPerc = transform.x / wrapWidth; transPerc = transPerc - Math.floor(transPerc); const trans = transPerc > 0 ? transPerc + 1 : transPerc; animation.progress(trans); Thanks for the quick replies!

Was that depreciated in gsap3? Similar to my recent post, I'm working on bringing a slider based on OSUBlake's draggable infinity slider up to gsap3. https://codepen.io/osublake/pen/veyxyQ In updateProgress() transform.x is usually a negative value, which is what's being passed to animation.progress(...). Looking closer, I didn't realize that progress will always compute to a positive number between 0 and 1. That logic makes sense and means I can just do the progress logic myself (something like const trans = transform.x > 0 ? (1 + transform.x) : transform.x;) before passing it to progress(). I think I had a general misunderstanding of the logic there and assumed it might be a bug in gsap3 since it worked that way in gsap2.

Thanks @GreenSock, it's working with the updated draggable file. Every once in a while, a blind nut finds a squirrel...or something like that ?.

I'm pretty sure I was able to set negative progress in gsap2, but it doesn't seem to be working in gsap3. Any thoughts?

I've been updating a working slider to GSAP 3 ? and am getting this breaking error: Cannot read property 'parentNode' of null. I've created a very simplified codepen where you'll see a working draggable box (for posterity) and one that uses a proxy, which causes the error. Could there be a bug in Draggable.js? The culprit is the updateMatrix() function at matrix = getGlobalMatrix(target.parentNode, true);. My proxy doesn't have a parentNode, so we're passing null here to getGlobalMatrix. If we hop over to matrix.js the getGlobalMatrix(element, inverse) function starts with if (!element.parentNode) { ... }. We're already passing the parentNode as element (which is null in my case), so it seems weird to me to check for a second (grand)parentNode. If it's helpful, the original slider was based on @OSUblake's Draggable Auto Slider which uses a proxy div as a target for the draggable. https://codepen.io/osublake/pen/veyxyQ

@ZachSaucier I just noticed your handling of the kill button by first assigning the tween to a variable tween = tl.tweenFromTo('start', 'end') and then killing it with tween.kill()... which is probably generally a better solution than my killAll() and trying exclude the timeline. Thanks for the quick replies!

Thanks for the replies. That makes sense how you described it. Basically with tweenFromTo, a Tween is spun off of the Timeline. Based on that description, I would expect TweenMax.killAll() to solve my problem...and it does! Though, another unexpected behavior is after killing the tween with TweenMax.killAll(false, true, true, false) (the last false is for timelines) I would expect to be able to run tweenFromTo again by clicking the Start button. +1 vote for renaming kill() to politelySayNo() and killAll() to nuke() ? https://codepen.io/sallf/pen/OJJgypR

I'm experiencing an issue where I can't kill() a timeline that was started with tweenFromTo. I also don't seem to be able to pause() or check isActive(). Expected result is that clicking the Kill button in mid animation, would ... well, kill the animation. Any thoughts? Note, in the CodePen, if you remove { paused: true } so that the animation runs on load, the Kill button and Indicator light both work as expected. https://codepen.io/sallf/pen/XWWgJgJ