Jump to content
Search Community

Can I disable/enable a mask with GSAP?

Paddy test
Moderator Tag

Recommended Posts

I've got a mask (redMask) that works fine, but I'd like to be able to turn it on/off.

Currently I'm moving the mask it so that it no longer masks my animation, which works, but it just feels like the wrong way to do it.

 

gsap.to("#redMaskHandler", {y: -31, duration: 0, delay: 7});

 

I'd originally thought I could change the opacity but, of course, that hides my animation entirely. Ideally I'd be able to remove or reapply redMask from the group I've applied it to.

Thanks

(sorry I'm not able to share this in CodePen)

Link to comment
Share on other sites

Just now, Paddy said:

So would I use

gsap.to("#redMaskHandler", {display: "none", duration: 0, delay: 7});

and

gsap.to("#redMaskHandler", {display: "block", duration: 0, delay: 7});

?

If you showed us a demo then it would be very helpful :) It doesn't have to be the exact stuff you're working on, it can just be a similar setup.

  • Like 1
Link to comment
Share on other sites

I'm not entirely clear on what you want to happen without a demo. As @ZachSaucier mentioned, it doesn't need to be the real project. Just a simple demo showing us the problem. That being said, I'd probably add another rectangle to the mask which is the full size of the group being masked and toggle its visibility. Again, I have limited information about what you're doing, but maybe something like this:

 

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

 

Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

Thanks all. Your demands for a code-pen have spurred me into building a much smaller and tidier version, but still using the moving-the-mask technique that I mentioned earlier. And it also highlights the problem I've had with my motion path not working when I put it where I think it should be. Any suggestions for how to do all of this better would be appreciated, though I'm very new to all this, so I might not be able to take on everything all at once...

Hopefully this codepen link (my first ever) will work:

See the Pen gOpvWob by puob (@puob) on CodePen

Link to comment
Share on other sites

You would greatly benefit yourself if you setup your SVG more cleanly. You should align the motion path with the pipe and make sure the masks are where you need them to be once you've done that. Then you can just use path: "#motionPath", align: "#motionPath", to align your elements to the path and move them correctly no matter where they start from. 

 

Side notes:

  • You don't need to register gsap. It doesn't make much sense for gsap to register gsap, does it? ;) 
  • If you want a different duration for each one, you probably don't want to change the original duration, do you? That would make the later ones come much later than the rest - I think you want a scoped duration instead so it doesn't affect the original? i.e. something like var myDuration = aniDuration + Math.floor(Math.random() * 200);
  • You should use a .set() instead of a .to() with a duration of 0.
  • You should use your dev tool's console to look for warnings and errors - it was pointing out that you don't have a ball0 so you should start your counter at 1 instead.
  • Please never write a for loop like this 🤣
for (
  i = 0;
  i < 5;
  i++ 
) {

This is much more standard and readable:

for (var i = 1; i < 5; i++) {

 

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

Oooh, that took a bit of puzzling out, Mikel. Thanks for putting together an interesting different technique. So you've used two motion paths and two identical circles, the second of which goes behind the first motion path. I wouldn't have thought of doing it that way.

I do notice a little jump in motion between the two motionPaths.

Link to comment
Share on other sites

Thanks for tips, Zach, though even I don't write For loops that way - it was codepen that did it with its auto-format on the js!! 🤯 (though starting at 0 was my mistake)

 

"set" is useful to know about; I find programming docs a bit overwhelming so I miss things like this.

 

You think this SVG isn't clean? You should see the ones I was working with the day before! ;-) There were <g>s with transforms inside <g>s with other transforms and loads of other stuff generated by Inkscape.

I made this one just by copying the d="" info from the paths I created in Inkscape, so I was surprised to find that I was still having trouble getting the motion path right. When I put it where the motion should happen, the circles are way off to the bottom right. I don't understand what's causing this. I guess I'll try again with a very simple SVG and see if I can make it happen again.

 

Re variable scope, do you mean that setting aniDuration in readiness for the second gsap.to() command will alter the duration of the gsap.to() command that's already started?

 

Thanks again,

Paddy

Link to comment
Share on other sites

2 hours ago, Paddy said:

Re variable scope, do you mean that setting aniDuration in readiness for the second gsap.to() command will alter the duration of the gsap.to() command that's already started?

No, I mean that the way you have it, it changes the original value so time gets added each iteration so that future ones are much longer than earlier ones.

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