Jump to content


Animating Gradients with multiple points of change

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

Does GSAP support this?


I'm basically doing a wipe of one image over the top of another, but with a soft edge to it... I've got it to display correctly statically... i.e. I've worked out the values for the gradient of the top image over the top whereby it has the following -webkit-linear-gradient...


-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%)


Whereby the 50 is the start of the gradient and the 55 is the end...i.e the blurry edge is 5% of the image...


How do I target these using animate? so that 50 goes from -5 to 100 whilst 55 goes from 0 to 105


I thought about a loop and then just adjusting the css but can i access these as an animate instead?



Link to comment
Share on other sites

Hello and welcome to the GreenSock Forums!


Looks like you are asking about CSS linear-gradients used in CSS image-masks:


browser support for image-masks:



browser support for gradients:



Looking at the support chart links above you can see that Browser Support for CSS image-masks is NOT well supported in all the modern web browsers.


If the CSS property is available in the browser than GSAP can animate it!


GSAP uses its awesome CSSPlugin to animate CSS properties.





With the help of the CSSPlugin, GSAP can animate almost any css-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Don't forget to load the CSSPlugin to enable these capabilities.


In CSS3, CSS Linear Gradients don't support CSS transitions yet (even though the W3C spec says they should. But each browser applies the spec differently.). If you want a fade-in effect with a gradient, you have to set an opacity on the parent container and transition / animate the opacity of the parent container.


But since the browsers are updating every month like Firefox, hopefully we have a consistent gradient spec and syntax real soon.


Of course, Jack and Carl, can better clarify regarding support for animating CSS linear-gradients inside CSS image-masks.


hope this helps :)

Link to comment
Share on other sites

Thanks Jonathan,


I'm really only looking to use it on touch interfaces, mainly iPad as I want my fades to relate to the user interacting with the images, ... so not too much off a concern in this case...


Thanks for the heads up on the CSSPlugin... will look into it now

Link to comment
Share on other sites



So I thought.... hmmm how am I going to pick out what to animate etc... so thought I'd just paste in what I wanted to do... like this...


TweenMax.to('#image1' ,2 , {'-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%, rgba(0,0,0,1) 105%, rgba(0,0,0,1) 100%)'});
...and it worked! I can knock off early now (I wish)
  • Like 1
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.