Animating gradients?

[Learning 16 Likes (Newbie)]

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?

[b1mind 69 Likes (Contributor)]

@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

[ZachSaucier 7,162 Likes (Superhero)]

Hey Learning. Yes, It's definitely possible. How to set it up depends on exactly what sort of animation you're wanting. I think that Stripe background uses WebGL. 

 

I'd be very interesting in seeing a write up of how they created that effect  

[Learning 16 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

8 minutes ago, Learning said:

I've noticed that if you run the konami code on the homepage, you get to adjust the waves and colours.

Sick, thanks for sharing.

[Dickey Singh 8 Likes (Newbie)]

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

[GreenSock 18,877 Likes (Superhero)]

@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!

[Dickey Singh 8 Likes (Newbie)]

wow - super compact!

[travisf 1 Likes (Newbie)]

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!

[Cassie 5,650 Likes (Superhero)]

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

[travisf 1 Likes (Newbie)]

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.