Jump to content
Search Community
LewisOne test
Moderator Tag

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

  • 4 weeks later...
  • 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

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.
×
×
  • Create New...