Jump to content
Search Community

Animate a timeline between two labels in "shortest" manner possible

romellem test
Moderator Tag

Warning: Please note

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. 

Recommended Posts

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.

See the Pen yQOQar by romellem (@romellem) on CodePen

Link to comment
Share on other sites

Only a few minutes to chime in here ... but you could get the progress() at each label, determine if the difference between the two is greater than .5

 

also have a look at getLabelTime() (I think :/)

 

If so, set the tween to reverse() to the start and then reverse to the destination label using tweenTo().

  • Like 3
Link to comment
Share on other sites

Does this help?: 

 

See the Pen VVjBKK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Basically I made a function for you:

 

function scrubTimeline(tl, from, to, wrap) {
  if (wrap) {
    //tween "from" to the end, then jump to the beginning and tween to the "to" position
    return new TimelineLite().add(tl.tweenFromTo(from, tl.duration())).add(tl.tweenFromTo(0, to, {immediateRender:false}));
  }
  return tl.tweenFromTo(from, to);
}

 

By the way, are you aware of DirectionalRotationPlugin? Might be helpful. You may not need to use complicated timeline setups. 

 

Another idea is to use ModifiersPlugin and just tween a value that you plug into the progress or time value on the timeline, but you can allow it to go past adjust it on-the-fly. Like, if you tween from a time of 10 to 20 on a timeline that's only 15 seconds long, you'd take the variable and do % 15 on it so that it just wraps very simply. You could do that with an onUpdate as well. There are many was to accomplish it actually - I don't want to overwhelm you :) I figured the function above is probably the most intuitive for most people.

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Thanks, not overwhelming at all! Couple of things:

  • The "rotation" example I used is a bit contrived, my actual use case isn't changing rotation at all so I don't think I'd have a use for DirectionalRotationPlugin.
  • Your `scrubTimeline` function is a good idea, however stringing together those two tweens seems like it only makes sense for Linear tweens. What if I have some more complicated easing going on?
  • Your suggestion of "tween some value that you plug into progress / time" was actually the same idea I recently came up with too! My idea was to tween some arbitrary JS Object, and use the `onUpdate` to set my progress/time. However, I wasn't aware of the ModifiersPlugin, and reading into that seems like it might be a bit more straight forward way to accomplish what I want to do.

This has helped a lot, thanks! I'll post an update with my eventual solution shortly.

Link to comment
Share on other sites

7 hours ago, romellem said:

Your `scrubTimeline` function is a good idea, however stringing together those two tweens seems like it only makes sense for Linear tweens. What if I have some more complicated easing going on?

 

Um, I don't think so - whatever easing you have in the original timeline would be preserved. And if you want to tween the progress of the timeline with an ease, that's totally possible too using the last parameter of the tweenTo()/tweenFrom()/tweenFromTo() method. Maybe I misunderstood what you meant, though. 

 

Feel free to post a different demo if you still need some help. This should be entirely possible.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...