JeuWert Posted June 9, 2022 Share Posted June 9, 2022 Hi there! I'm trying to have a timeline trigger a borderRadius when entering viewport, and it works (codepen). But I would like to have a random borderRadius. I have managed to get a function to work that gives a random borderRadius (code below) but how can I call that function inside the ScrollTrigger timeline? $(".blob-wrapper").each(function(){ var rand=""; for(var i=0;i<8;i++) { rand += Math.floor(Math.random() * 50) + 30 + "%"; if(i!=3) rand +=" "; else rand +="/ "; } $(this).css( { borderRadius: rand } ); }); Greatly appreciate your help :) See the Pen PoQyaLw by jeuwert (@jeuwert) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 9, 2022 Solution Share Posted June 9, 2022 Hello @JeuWert - welcome to the GSAP forums! Did you know that GSAP does have its own random() utility-method? ...you can even set it up as a reusable function. https://greensock.com/docs/v3/GSAP/UtilityMethods/random() With that you could do something like in the codepen below then. I just changed the start and end here for better showing the changes - yours are totally fine if you want to scrub it all the way when it is in view. One thing I noticed is that GSAP doesn't seem to like this format borderRadius: '72% 28% 66% 34% / 58% 53% 47% 42%' - not sure why, though. So I switched things to this instead, which does appear to work as probably intended borderTopLeftRadius: `${random()}% ${random()}%`, borderTopRightRadius: `${random()}% ${random()}%`, borderBottomLeftRadius: `${random()}% ${random()}%`, borderBottomRightRadius: `${random()}% ${random()}%`, Oh, one more thing: you do have transition:all .3s ease; set on your .blob-wrapper - you shouldn't add transitions like that to elements that you are going to tween on with GSAP as it will cause conflicts - so I removed that. See the Pen LYQgBLK by akapowl (@akapowl) on CodePen I'll add codepens just for comparison of how the format mentioned above behaves in comparison - there is an initial jump - I think because GSAP will somehow only recognize the first 4 percentage values before the / - not sure if this might be a bug or is by design though - maybe someone else can shed some light. See the Pen qBxJyoe by akapowl (@akapowl) on CodePen See the Pen oNEaPzz by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
JeuWert Posted June 9, 2022 Author Share Posted June 9, 2022 Hi @akapowl This is exactly what I was looking for! I was not aware of the random() utility-method but I will definitely read the dokumention on this. Thank you so much! Best regards Jesper 1 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