Jump to content
GreenSock

dada78

CSSPlugIn VS ColorProps

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

I would like to simply tween the .banner background from a radial gradient to a linear gradient currently commented out in the codepen. I was hoping to accomplish that with the CSSPlugin. Not sure if I am not using it correctly, but it doesn't seem to be animating...I also imported the colorProps plug-in but am not sure how to implement it exactly.

 

Thanks!

See the Pen ffbf310cca80e586d957ba5129747cae by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

  • Solution

I am away from my computer at the moment but ... the below code examples use the ColorPropsPlugin and the CSSPlugin. It animates without the use of vendor prefixes for the new syntax. Thanks to Carl for the original solution!

 

Maybe the below can give some ideas until i am near my computer, and more helpful. :)

 

Here is an example of animating of a cross browser radial gradient:

 

See the Pen BeJwd by jonathan (@jonathan) on CodePen

:

// new syntax
radial-gradient(<shape> <extent-keyword> at <position>, <color> <percentage-or-length>, <color> <percentage-or-length>);
// shape is either: circle or ellipse
radial-gradient(circle, blue, yellow);

:

Here is an example of cross browser animating of a cross browser linear gradient:

 

See the Pen vJwzD by jonathan (@jonathan) on CodePen

:

// new syntax
linear-gradient(to <side-or-corner>, <color> <percentage-or-length>, <color> <percentage-or-length>);
// to top, bottom, left, right
linear-gradient(to top, blue, yellow);

:

The syntax changed awhile ago for CSS3 gradients so its more streamlined. You might want to take a look at the following page to get familiar with the new syntax:

 

https://css-tricks.com/css3-gradients/

 

Other resource for cross browser gradients, please see:

Also see GSAP JS Forum Topic:

Hope this helps! :0

  • Like 2
Link to comment
Share on other sites

GSAP does not support the tweening of CSS gradients currently.

 

Also I'm not even sure that you can tween from Linear to Radial as I don't know what those intermediary values would be.

 

You were definitely on the right track with ColorPropsPlugin. What you can do is tween any color value to any other color value and then apply those new color values using an onUpdate. Its not the easiest thing in the world, but it is possible like this:

 

http://codepen.io/GreenSock/pen/fd7a17568b86f033c5c45f3e4c8c7bef

 

Basically I'm taking the color object with top and bottom properties and tweening 

 

color.top from aqua to yellow and color.bottom from blue to green. As that tween updates I'm applying a new gradient to the ".banner"s background

 

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

If you really need to go from Linear to Radial it might be easier just to cross-fade 2 elements.

 

EDIT: go with Jonthan's solution for the cross-browser stuff !

  • Like 1
Link to comment
Share on other sites

Ok thanks guys! That helped a lot actually. Let me see what will work best. I will likely just have to modify the creative to go from linear to linear. If all else fails I'll do the cross-fade. Thanks a bunch!

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