Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Learning

Animating gradients?

Recommended Posts

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?

Link to post
Share on other sites

@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

Link to post
Share on other sites

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 :) 

Link to post
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 post
Share on other sites
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.

Link to post
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 1
  • Thanks 1
Link to post
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 3
  • Thanks 1
Link to post
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.

×