romellem
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by romellem
-
-
I have an animation that is "seemless," meaning that when it is played on an infinite loop you can't tell which part is the beginning, and which is the end.
Let's say I have two labels, one near the start (about 10% of the way in) and another near the end (around 90% completed):
| start end | |----|----|----|----|----|----|----|----|----|
If I create a `tweenTo` from 'start' to 'end', it'll go "the long ways", scrubbing the playhead forward from 10% over to 90%.
Tween from 'start' to 'end' would go "long ways" from the left to the right :==================================> | start end | |----|----|----|----|----|----|----|----|----|
So far so good, this makes sense to me.
But what if I don't want that to happen? Since my animation is seemless, technically the animation could start at 10% and go backwards until it reaches the beginning, then loops around to the end of the animation and continues in reverse until it reaches the 'end' label at 90%.
But what if I wanted to go "backwards" from 'start' and loop around to 'end'? /====: <====/ | start end | |----|----|----|----|----|----|----|----|----|
This would be the "short way" between those two labels.
My question is, how would I go about creating an effect like this?
That is, if I have two labels, is it possible to animate between them where my animation "wraps around" the timeline instead of staying contained within the timeline?
The codepen I've included shows the issue I'm facing on the left, as well as a "faked" example on the right that shows what I want the animate on the left to do when tweening "around" my two labels.
Animate a timeline between two labels in "shortest" manner possible
in GSAP
Posted
Thanks, not overwhelming at all! Couple of things:
This has helped a lot, thanks! I'll post an update with my eventual solution shortly.