Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

yoyo 1->2, 3->4

Recommended Posts

Hello, I am writing to ask, if there is any example or tutorial with the following problem:


I have two tween, which both need to yoyo.

But the sequences is executed
1) first tween runs

2) second twin runs

3) second twin yoyos back

4) first twin yoyos back

when its needs to be

1->3, 2->4



tl.staggerTo(path, duration, stagger_settings, stagger_val)
.staggerTo(path2, duration, stagger_settings2, stagger_val);


I am adding the 

yoyo: true; 

when initiating the timeline


var tl = new TimelineMax(optionsGlobal)





Link to post
Share on other sites

Welcome to the forums, @saritas


It looks like you're using the old syntax. I'd strongly recommend upgrading to the more concise, powerful and simple API in GSAP 3. 


You can just use repeatDelay to put a delay before the yoyo:

let tl = gsap.timeline();
tl.to(obj1, {x: 100, duration: 1, repeat: 1, yoyo: true, repeatDelay: 2})
  .to(obj2, {x: 100, duration: 1, repeat: 1, yoyo: true}, 1);

Or you can just use 4 tweens instead of yoyoing 2 tweens. In other words, accomplish the yoyo effect with different tweens. 


Happy tweening

  • Like 5
Link to post
Share on other sites

Thank you for the quick response, indeed I was using the old version.

I've tried to get acquitted with the newer version of GSAP and it is really great, reduced my code to 1/4th.

I've followed the documentation and a pair of examples but couldnt make it work.

Could you please tell me if the concept is correct and maybe my html is messy...

(Hopefully it's not just some comma)


const tl = gsap.timeline({
  yoyo: true,
  repeat: -1
}).to("svg *", {
  duration: 2,
  x: "+=random(-500, 500)",
  y: "+=random(-500, 500)",
  rotation: "+=random(-45, 45)",
  ease: "power4.inOut",
  opacity: 0


Link to post
Share on other sites

Hey saritas. Could you please create a minimal demo of the issue that you're facing? I think it's impossible to know what's going wrong based on solely the snippet of code that you shared.

Link to post
Share on other sites

Thank you very much again. I did find and solve the problem using codepen.io .

Turns out it was a dependency issue.

Your tech is really great and it was a pleasure using it. I am not really concerned with animations but now I would like to try more into the field.

  • Like 2
Link to post
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.