Blending

[LewisOne 1 Likes (Newbie)]

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???

[LewisOne 1 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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

[LewisOne 1 Likes (Newbie)]

The codepen link is broke???

[Carl 9,066 Likes (Superhero)]

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

[LewisOne 1 Likes (Newbie)]

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.

[nene 0 Likes (Newbie)]

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?

[Jonathan 5,176 Likes (Superhero)]

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:

• MDN - CSS linear-gradient
• Safari CSS Visual Effects Guide - Using Gradients
• http://www.css3files.com/gradient/
• http://css-tricks.com/css3-gradients/
• http://caniuse.com/#search=gradients

Hope this helps!

[Jonathan 5,176 Likes (Superhero)]

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:

• MDN - radial-gradient
• W3C - CSS Image Values and Replaced Content Module Level 3

[LewisOne 1 Likes (Newbie)]

Very cool....  Brilliant.

[nene 0 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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.

• Are you saying you want to have the animation complete fully, even if you mouse out mid-way through the tween's animation ? If so.. check out an answer from this reply for a workaround by GreenSock's Carl: http://forums.greensock.com/topic/9870-pausing-timeline-but-not-tween/?view=findpost&p=39710