rmdev Posted June 11, 2021 Share Posted June 11, 2021 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 More sharing options...
PointC Posted June 11, 2021 Share Posted June 11, 2021 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. 4 1 Link to comment Share on other sites More sharing options...
rmdev Posted June 11, 2021 Author Share Posted June 11, 2021 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. textTL .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 More sharing options...
PointC Posted June 11, 2021 Share Posted June 11, 2021 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. 5 1 Link to comment Share on other sites More sharing options...
rmdev Posted June 14, 2021 Author Share Posted June 14, 2021 Yes, that makes perfect sense and works brilliantly. Thanks for all the help 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