Pata Posted April 13, 2020 Share Posted April 13, 2020 Hi there! I'm trying to repeat a timeline with different random numbers values on each repetition. (On the circles staggering) It seems it is working but the first tweens are not repeating. .to(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) If I change the "to" for a "from" it works. .from(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) Is this the best way to do it? Thanks in advance, See the Pen NWGqEgX by pataduprins (@pataduprins) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 13, 2020 Share Posted April 13, 2020 Hey pata. I think you're looking for the repeatRefresh feature Here's how I'd set it up: See the Pen bGVdQzK?editors=0010 by GreenSock (@GreenSock) on CodePen Side notes: GSAP has built in random functionality! You don't need to add units to your values for the most part. You should use a position parameter of 0 to start animations all at the start (no need for relative offsets for that). But if you do use relative offsets, I recommend using "<" instead. For more information check out this post: It's best to use .fromTo()s if you want different values each time. That way it doesn't use the end values from the previous iteration. 3 Link to comment Share on other sites More sharing options...
Pata Posted April 13, 2020 Author Share Posted April 13, 2020 Hey Zach, thanks for the fast answer. I really appreciate your tips but on your solution I just can see the same circles movement on each repetition. No new random numbers seems to be generated. Maybe we are missing something? Thanks, Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 13, 2020 Share Posted April 13, 2020 4 minutes ago, Pata said: I just can see the same circles movement on each repetition. No new random numbers seems to be generated. Maybe we are missing something? That's because the animation is so fast and the values are similar to each other (I was trying to generate ones similar to the ones that you had). Just change the range to something like -400, 400 to see that it is indeed working. Link to comment Share on other sites More sharing options...
Pata Posted April 13, 2020 Author Share Posted April 13, 2020 Cool! I can see the changes now. Thanks a lot! 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