Jump to content


Wondering what i'm doing wrong with repeatRefresh when attempting to refresh the random value

Go to solution Solved by akapowl,

Recommended Posts

Hello, trying to animate a path to simulate a wave without much success. For one thing the random value is not being refreshed. Thanks in advance

const wave = draw.path(`M0,100 Q 75,150 150,100 T400,100 `).stroke("red");


  .timeline({ repeatRefresh: true, repeat: -1, yoyo: true, ease: "none" })
  .to(wave.node, {
    attr: { d: `M0,100 Q 75,${gsap.utils.random([30, 100])} 150,100 T400,100` }


See the Pen QWaYZVa by limitedunlimited (@limitedunlimited) on CodePen

Link to comment
Share on other sites

  • Solution

Hello James.


Make sure to use function-based values for the d attribute if you use the utils.random like that, so it gets a new random value on every repeat.


Little sidenote: eases can not be set on timelines - only on the tweens of a timeline or in the timeline's defaults.


See the Pen vYpbPeZ by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

Hi, thank you for looking into this for me. 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.