Jump to content
GreenSock

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

Blending

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

I was trying to figure out how to create a color blend within tweenMax.  I can set it with css3 and my goal is to do a mouseOver that changes the colors of the blend, then changes back when mouseOut.

 

So the top of the div is blue and bottom yellow, when mouse over it goes from green to yellow.

 

Also for radial blending and such.  Any resources???

Link to comment
Share on other sites

AAAhhhh,  I need to activate the colorProps plugin.  Works like a charm... duh. hahahaa

 

If anyone has some cool ways to color stuff let me know.  Thanks Team.

Link to comment
Share on other sites

Cool,

 

I made this very simple demo just to illustrate 1 way of applying color tweens to css gradient values. Very basic and webkit only:

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

Link to comment
Share on other sites

The codepen link is broke???

Link to comment
Share on other sites

weird. I saw it was broken like you said. I logged into codepen and then it showed up again.

After logging out, it seemed to work fine too. try the link again

 

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

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

Super interesting way to do it, however I can't get it to work in FF (no beginning image or anything, mouseovers don't work) but works in Safari. I get the concept of how you did it, I'll mess with it some more.

Link to comment
Share on other sites

  • 11 months later...
Playing around with the same example: 

See the Pen wfuaB by gerryAB (@gerryAB) on CodePen


 

Using gradient changes, for example for a navigation menu. 

 

1: Is it possible not to use the -vendors (o,moz,webkit...)-, for this to work on any modern browser 

2: To advanced ;). For this application, using TweenMax | Lite, there is another option to achieve the same thing?. I would like to know. 

3: I can not make on mouseover apply on the current div :eq(N) and not to the first. How to assig the tween to the current div?

Link to comment
Share on other sites

Hello.. The reason you are not seeing it work in Firefox, is because of the -webkit vendor prefix.

 

This can be made to work cross browser. There is a new syntax for CSS gradients, so they are more consistent cross browser. You need to add the to for declaring position.. i.e.. to top or to right. And with the new syntax you don't need a vendor prefix. Check out cross browser syntax in the codepen link below.

 

I forked the Mighty Carl's codepen example:

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

 

You can see it work in both Firefox, Chrome, and Safari

// 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);

Resources:

Hope this helps! :)

Link to comment
Share on other sites

For a radial-gradient the syntax has changed as well. Original codepen forked from Carl's codepen above.

 

radial-gradient example:

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

Radial Gradient resource:

:)

  • Like 2
Link to comment
Share on other sites

Very cool....  Brilliant.

Link to comment
Share on other sites

Hi, me again, with little doubt. Check this plis: 

See the Pen wfuaB by gerryAB (@gerryAB) on CodePen

 

jonathan, used your recommendation on radial and linear css, it works great. 

 
There is a small detail. Not completely ending the gradient animation when you change to another option. If you choose another and roll over it the gradient tweening stops
Link to comment
Share on other sites

Thanks to Carl for his codepen...

 

In latest Firefox and Chrome.. when i hover out of one element and go to hover over one of its siblings.. i see the previous elements gradient animate back to its default state, after a slight delay.

 

I see that happen if i start to hover over an element, and then immediately hover out. That happens because of the reverse() on the hover out.

 

So if you hover in and the tween starts to animate,and then half way through the animation, say at 0.5 seconds, you hover out. Then the animation will reverse back from 0.5 to 0 ... so it never got to the last half of your animation because of the reverse(). So when you mouse out the animation reverses the tween back to zero.

:)

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