Jump to content
Search Community

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

JamesGrubb test
Moderator Tag

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");

console.log(wave.node);

gsap
  .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

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.
×
×
  • Create New...