Edify Technologies
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Edify Technologies
-
-
@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
vstotalTime
.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
to3
again, it seems to run backwards. I suspect this is becausetotalTime
of0
&6
are the same thing and the animation is running in reverse from6
to3
? -
I'm trying to create a single timeline that uses
yoyoEase: true
so that it has anelastic.out
bounce in both directions. The animation is triggered on click, so I assumed usingtl.tweenFromTo()
would work. However tweening from0
toduration / 2
, and fromduration / 2
toduration
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? -
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 between0
and0.5
no problem, but as soon as you go to1
, you can't get back to0
. I've experimented with other values as well, and everything seems to work until you go to1
for the first time. After that, when you try and return to0
it reevaluates to1
.Does this look like a bug, or do I have my logic wrong? Thanks!
- 1
-
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!
- 2
-
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.
See the Pen veyxyQ by osublake (@osublake) on CodePen
In
updateProgress()
transform.x
is usually a negative value, which is what's being passed toanimation.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 consttrans = transform.x > 0 ? (1 + transform.x) : transform.x;
) before passing it toprogress()
.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 ?.
- 2
-
-
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 atmatrix = getGlobalMatrix(target.parentNode, true);
. My proxy doesn't have a parentNode, so we're passingnull
here togetGlobalMatrix
.If we hop over to
matrix.js
thegetGlobalMatrix(element, inverse)
function starts withif (!element.parentNode) { ... }
. We're already passing the parentNode aselement
(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.
See the Pen veyxyQ by osublake (@osublake) on CodePen
-
@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 withtween.kill()
... which is probably generally a better solution than mykillAll()
and trying exclude the timeline.Thanks for the quick replies!
-
30 minutes ago, ZachSaucier said:
As the docs say,
tweenFromTo
returns a tween instance. So really what's happening is your timeline isn't playing, the tween of the timeline's progress is playing. Does that make sense? So when you're trying to pause it, the timeline is still "paused". You should pause the tween that is created instead.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 expectTweenMax.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 fortimelines
) I would expect to be able to runtweenFromTo
again by clicking the Start button.+1 vote for renaming
kill()
topolitelySayNo()
andkillAll()
tonuke()
?See the Pen OJJgypR by sallf (@sallf) on CodePen
- 2
-
I'm experiencing an issue where I can't
kill()
a timeline that was started withtweenFromTo
. I also don't seem to be able topause()
or checkisActive()
. 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.- 1
Timeline tweenFromTo not working as expected with yoyo
in GSAP
Posted
That's very clean. Super helpful and probably a good shift in how I think about animations. Thanks so much!