Jump to content
GreenSock

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

How to animate gradient mask of an image?

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

Hi,

 

Perhaps this codepen by Craig might help you get started:

 

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

 

I'm sure Craig will take a look at the forums later and He'll have lot's more to add to this.

 

Unfortunately SVG is not my strongest point so besides the link I can't do more for you.

  • Like 1
Link to comment
Share on other sites

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 2
Link to comment
Share on other sites

You rock, Craig!

  • Like 1
Link to comment
Share on other sites

You rock, Craig!

I can't argue with that statement.  :D  

 

It was kind of funny - CodePen picked that one without me tweeting at them. I'm not sure how they even ran into it, but I'm not complaining. 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Not sure if anyone is still struggling with this, but I needed the "gradient" part of that demo animation to work. I eventually figured it out, so here it is:

See the Pen dVGXJL?editors=1010 by jordanjs (@jordanjs) on CodePen

 

Seems simple, but if you're like me and your brain doesn't want to work on a Monday morning, it's right there. :)

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