Jump to content
Search Community

Timeline with random borderRadius

JeuWert test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

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

 

  • Like 2
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...