Jump to content

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

I can't get random variables for each timeline repeat using repeatRefres

Recommended Posts

Hi Guys, 


I'm trying to create some glitching text that is different on every repeat using an SVG filter and some basic transforms. I'm happy enough with how it looks but can't get the randomised skewX and Delay variables to refresh on repeat despite setting repeatRefresh to true on the timeline and using the gsap random functions or a custom function. I feel like I've set it up correctly but I must be doing something stupid and I can't spot it.


Any help would be greatly appreciated!

See the Pen xxqyRpK?editors=0010 by padders1980 (@padders1980) on CodePen

Link to comment
Share on other sites

You'd need to make one small change:


//switch this
skewX: gsap.utils.random(-20, 20),

//to one of these
skewX: gsap.utils.random(-20, 20, true)
skewX: "random(-20, 20)"

Happy tweening.



  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Ahhh, thank you.

That works brilliantly for the skewX (and all the other variables) but not for delay as far as I can tell. I was hoping to have a random repeat delay too.


  .to(text_to_distort, {
    attr: {
      baseFrequency: gsap.utils.random(0.2, 2, true),
      numOctaves: gsap.utils.random(2, 10, 1, true),
      seed: gsap.utils.random(1, 4, true),
    x: gsap.utils.random(-2, 2, true), 
    y: gsap.utils.random(-2, 2, true),
    skewX: gsap.utils.random(-20, 20, true),
    scale: gsap.utils.random(0.5, 1.1, true),
    duration: text_distort_dur,
    delay: gsap.utils.random(0, 5, true)

I thought by adding a random delay to the first tween in the timeline it would add a random repeat delay. Is there another method? I don't seem to be able to apply a random function to the repeatDelay variable on the timeline itself.



Link to comment
Share on other sites

Yeah - sorry about that. I didn't see the part about delay. duration, delay and stagger do not refresh. In this case you'd probably want to create the animation in a function and then onComplete call the function again. 


Does that make sense?


Happy tweening.



  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Yes, that makes perfect sense and works brilliantly. Thanks for all the help :)

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.