Jump to content
GreenSock

SammyC123

Alternating a tween's direction on repeat after the yoyo finishes

Go to solution Solved by Rodrigo,

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 simply trying to swap the direction of a tween on each subsequent repeat, e.g move x from -5 to 5 alternatively on repeat after the yoyo completes.

 

I've tried the staggerTo({cycle:}) property but that is more for laying out a pattern of multiple elements.  I've tried onRepeat but that fires the callback before the yoyo begins.

 

Where am I going wrong?  Just a little hint would be good.  In this instance, [object] is exemplary; I understand about [{self}].

TweenMax.to([object], 3, {
    x: -5,
    yoyo: true,
    repeat: -1,
    onComplete: reverseDirection,
    onCompleteParams: [object]
});

function reverseDirection(object) {
    // logic here... x: 5
}
Link to comment
Share on other sites

  • Solution

Hi,

 

In this case the issue is that a Tween instance with a repeat:-1 is an infinite loop, therefore the onComplete will never be called. What you could try is use a timeline with a simple animation to 5 and then add a TweenMax instance that goes to -5 with the repeat:-1. That final instance will have as a starting point 5 and final point -5, so it'll loop between those values endlessly:

var tl = new TimelineLite();

tl
  .to(object, 3, {x:-5, ease:Linear.easeNone})
  .add(TweenMax.to(object, 3, {x:5, repeat:-1, yoyo:true, ease:Linear.easeNone}));

EDIT:

 

I missed the fact that a TimelineLite instance can have endless instances in it, therefore the code above is even simpler:

var tl = new TimelineLite();

tl
  .to("#el", 1, {x:10, ease:Linear.easeNone})
  .to("#el", 1, {x:-10, ease:Linear.easeNone, repeat:-1, yoyo:true});

See the Pen grXmqV by rhernando (@rhernando) on CodePen

  • Like 4
  • Thanks 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.
×