Jump to content
Search Community

How to animate gradient mask of an image?

nep test
Moderator Tag

Go to solution Solved by PointC,

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 would like to animate the gradient mask's position from right to left on image, how do you accomplish this using Tweenmax that is compatible for most browsers specially on Chrome & Firefox?

 

**I was able to create a gradient mask in chrome using -webkit-mask-image

but mask don't work on firefox**

 

HTML:

<div id="gradient mask">
    <div id="myimage"></div>
</div>

CSS:

#myimage {
    background-image: url(image.jpg);
    width: 259px;
    height: 194px;
}

 

post-41966-0-31164700-1469166940_thumb.jpg

Link to comment
Share on other sites

As far as I know, there is no cross-browser way to do masking (not clipping) except in SVG. I don't have time to work up a whole example for you now, but perhaps this article will help with the concept in SVG: http://tutorials.jenkov.com/svg/mask.html. And keep in mind that GSAP can animate pretty much any property of any object, so you should be able to use it to animate the mask once you've got it set up properly. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi nep  :)

 

You said you want to move the mask from right to left  so I'm assuming this is a soft reveal of the image?

 

I'd agree with Jack and recommend an SVG mask. The pen Rodrigo pointed out is using a solid colored square as the mask, but we can add a black to white linear gradient to the square and get a nice soft edged reveal. Using GSAP we just need to animate the x1 and x2 attributes of the linear gradient:

TweenMax.to("#theGradient", 2, {attr:{x1:-800, x2:1}, repeat:-1, yoyo:true, repeatDelay:0.5, ease:Power2.easeIn})
// adjusting the x1 value in the tween can change the reveal. switch it to your liking
// the closer you get to 0, the more abrupt the end of the reveal will be

Here's a CodePen to get you started:

 

See the Pen yJjNOX by PointC (@PointC) on CodePen

 

Hopefully that gets you closer to your goal.

 

Happy tweening.

:)

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

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