Jump to content
Search Community

Altering offset during animation

AllTheTime 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'm a little confused about why you'd want to do that, but yes, it's possible. Every tween has a startTime which you can change if you want:

var tween = TweenLite.to(contain, 1, {left:"-100%"});
tl.add(tween, "+=4");

//then later...
tween.startTime( tween.startTime() - 4 );

But again, this sounds more like an architecture problem in the way you're approaching your animations (but maybe not). 

  • Like 2
Link to comment
Share on other sites

I have this; a simple slider:

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

I want it to turn into this when there is keyboard or mouse input so that I can tweenTo the destination smoothly (without the static parts)...

t1.to(contain, 1, {left:"-100%"})
 .to(contain, 1, {left:"-200%"})
 .to(contain, 1, {left:"-300%"})
 .to(contain, 1, {left:"-400%"})

I have attempted using two separate animations and switching between them but synchronizing them is a little clunky and I'm hoping there is a simpler way.

Link to comment
Share on other sites

Perhaps you could get the specific label time and tween the timeline's time property to that specific point:

var t1 = new TimelineLite(),

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

// now get the time of each label
oneTime = getLabelTime("one");
twoTime = getLabelTime("two");
threeTime = getLabelTime("three");
fourTime = getLabelTime("four");

// finally tween the timeline's time to that specific point
// in this case the label named three
TweenLite.to(t1, 1, {time:threeTime});

Another option is use getLabelsArray(), but that's a TimelineMax method, so you'll have to include that file in your app. This method returns an array with all the labels and their specific time in the timeline:

var t1 = new TimelineLite(),

t1.to(contain, 1, {left:"-100%"},"+=4", "one")
  .to(contain, 1, {left:"-200%"},"+=4", "two")
  .to(contain, 1, {left:"-300%"},"+=4", "three")
  .to(contain, 1, {left:"-400%"},"+=4", "four");

labelsArray = t1.getLabelsArray();

// now tween the timeline's time to the third label position
TweenLite.to(t1, 1, {time:labelsArray[2].time}); 

You have to consider the fact that an element's index position in an array starts at 0, so the first element has a 0 position and the fourth element is at position number 3, that's why the third label's time is at position 2.



Link to comment
Share on other sites

Rodrigo's concept could work nicely if you just build a 2nd timeline that animates the playhead of the original timeline in such a way that it skips over those gaps. Kinda like:

var noGaps = new TimelineLite();
noGaps.fromTo(tl, 1, {time:0}, {time:1})
  .fromTo(tl, 1, {time:5}, {time:6})
  .fromTo(tl, 1, {time:10}, {time:11})
  .fromTo(tl, 1, {time:15}, {time:16});

You could use the getLabelTime() if that helps too. 


I hope the concept makes sense.

  • Like 1
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...