Jump to content
Search Community

Animating gradients?

Learning test
Moderator Tag

Recommended Posts

@Learning Maybe this can help get you started. I know its not quite what your after... but its defiantly possible. 🧙‍♂️

 

I might tinker more later by adding some more overlays or try some masking, it looks like they are doing it in canvas which is also possible with gsap but out of my knowledge box. --edit I think using CSS vars is a decent way to go about it, because you can animate the pseudo props too. Canvas or SVG might be more fluid for the wave/motion. 

 

See the Pen VweEeog by b1m1nd (@b1m1nd) on CodePen

  • Like 1
Link to comment
Share on other sites

@b1Mind Yea! That's definitely a good starting point, thank you! I'm thinking the waves and mesh of colours seem to be similar to perlin noise. I've seen some similar effects using threejs but I don't think it was used in this case.

 

@ZachSaucier I'd love it if they did a writeup of the gradient effect. They have done a couple of writeups for their previous frontend development stuff and it was great reading and learning material.

 

I've noticed that if you run the konami code on the homepage, you get to adjust the waves and colours. But I can't seem to figure out the gradient code itself as it's all minified and a little hard to understand this way.

  • Like 2
Link to comment
Share on other sites

Stripe webGL example sucks up a ton of battery. Surprised to see they have it enabled on mobile as well.

 

just experimenting a bit with animating linear gradients (svg gradients should work similar)

let b1 = "linear-gradient(217deg, rgba(255,0,0,.9), rgba(255,0,0,0) 70.71%),  linear-gradient(127deg, rgba(0,255,0,.9), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.9), rgba(0,0,255,0) 70.71%)";
let b2 = "linear-gradient(17deg, rgba(255,0,0,.7), rgba(255,0,0,0) 70.71%), linear-gradient(200deg, rgba(0, 255, 0, .9), rgba(0,255,0,.2) 70.71%),  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0.1) 70.71%)";
gsap.timeline({repeat:-1, yoyo:"true", repeatDelay:0})
  .add(gsap.set("#a", {width:300, height:200, background: b1}))
  .add(gsap.to("#a", {ease: "none", duration: 6, background: b2}))
  .play(0)

 

See the Pen LYGXrMq by DickeySingh (@DickeySingh) on CodePen

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

@Dickey Singh Nice, thanks for sharing. Just a few very minor notes about your code...

  • yoyo is a boolean value, not a string. 
    // BAD
    {yoyo: "true"}
    
    // GOOD
    {yoyo: true}

     

  • You don't need to .add(gsap.set(...)) - just use the convenience methods to make things more concise:
    // LONG
    .add(gsap.set("#a", {width:300, height:200, background: b1}))
    
    // SHORT
    .set("#a", {width:300, height:200, background: b1})

     

  • There's no need to .play(0) at the end. That happens automatically.
  • There's no need to set repeatDelay: 0 because that's the default. 
  • You could use a fromTo() instead of sequencing a set() and then a to(). Basically combine them. 
  • If you aren't sequencing things, there's no need to use a timeline. You could use a simple tween. 

So here's the comparison:

// NOT AS CONCISE
gsap.timeline({repeat:-1, yoyo:"true", repeatDelay:0})
  .add(gsap.set("#a", {width:300, height:200, background: b1}))
  .add(gsap.to("#a", {ease: "none", duration: 6, background: b2}))
  .play(0);

// BETTER
gsap.fromTo("#a", {width:300, height:200, background: b1}, {ease: "none", duration: 6, background: b2, repeat: -1, yoyo: true});

Happy tweening!

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

  • 1 year later...
On 7/16/2020 at 12:50 AM, Learning said:

Hi guys,

This might be a little off topic, but I was wondering if it's possible to animate gradients like how the https://stripe.com/ stripe homepage banner does with gsap?

Stripe tends to change their website constantly, I'm just attaching this for reference.  - Ah sorry I'm out of space!

Link to comment
Share on other sites

  • 2 weeks later...
On 5/4/2022 at 7:04 AM, Cassie said:

Sorry is there a question here? I'm a little confused

Sorry, I wanted to add a gif for future reference since it's likely that Stripe.com will change before this question becomes irrelevant but my account dosen't have space to do so.

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