saritas Posted February 4, 2021 Share Posted February 4, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted February 4, 2021 Share Posted February 4, 2021 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 5 Link to comment Share on other sites More sharing options...
saritas Posted February 4, 2021 Author Share Posted February 4, 2021 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 comment Share on other sites More sharing options...
ZachSaucier Posted February 4, 2021 Share Posted February 4, 2021 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 comment Share on other sites More sharing options...
saritas Posted February 4, 2021 Author Share Posted February 4, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now