Creating a fluid moving background

[deglau]

I don't have a codepen for this, because I am not sure of the proper approach. I am currently using ReactJS to mount, unmount and update my view components. Based on the state of a component, I have made changes to the linear-gradient of the background using TweenLite.to(). I was wondering what Tweens I should use in order to make these changes in linear-gradients, fluid. I.e., make the color that is in the top right corner, move down to the left corner, while the top right corner is replaced by another color. This process would repeat itself as many times as I needed it to. Is this even possible with GSAP?

[Carl]

Hi and welcome to the GreenSock forums,

 

Sorry, I don't know about the ReactJS side of this, but for animating a gradient with GSAP, perhaps this will get you started:

http://codepen.io/GreenSock/pen/wnIcr (webkit)

 

From what you are describing you may need to animate multiple values that you apply to your css gradient.

[deglau]

Hi and welcome to the GreenSock forums,

 

Sorry, I don't know about the ReactJS side of this, but for animating a gradient with GSAP, perhaps this will get you started:

See the Pen wnIcr by GreenSock (@GreenSock) on CodePen

(webkit)

 

From what you are describing you may need to animate multiple values that you apply to your css gradient.

 

This will definitely get me started. Thank you!

[deglau]

@carl, I was able to get this working great. Thank you for leading me in the right direction. Now with this, how could I add another (DOM) element to this? Would I have to create a new tween, or can I add the element in an array somehow? I know how to do it with a regular TweenLite.to() setup, but this seems a bit different. Maybe I'm just overlooking something...

[Carl]

If you want to animate multiple DOM elements at the same time using the same color values, it is fairly simple: http://codepen.io/GreenSock/pen/lgIwD (just give each animated element the same class)

 

From what you are describing it sounds like you will need a new tween and color object for each element.

 

One way to approach that is to assign each DOM element its own color object and then give that element its own tween. 

All tweens can re-use the same onUpdate though. 

 

var red = document.getElementById("red"),
    green = document.getElementById("green");




red.colors = {top:"#c00", bottom:"yellow"};
green.colors = {top:"#030", bottom:"lime"};


$(".demo").each(function(index, element){
  // set start state of gradient on each element
  colorize(element) 
  // create tween that animates the top value to the bottom value 
  element.tween = TweenLite.to(element.colors, 0.5, {colorProps:{top:element.colors.bottom, bottom:element.colors.top}, onUpdate:colorize, onUpdateParams:[element], paused:true});
})


$(".demo").hover(over, out);


function over() {
  this.tween.play();
};


function out() {
  this.tween.reverse();
}


function colorize(element) {
  //apply the colors to the element
  TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + element.colors.top + ", " + element.colors.bottom + ")"});
}

http://codepen.io/GreenSock/pen/lgIwD?editors=001