Jump to content
GreenSock

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

Can I disable/enable a mask with GSAP?

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)

Share this post


Link to post
Share on other sites

Hey Paddy. It's hard to help in abstract like this. Can you reproduce something similar for us to look at? 

 

Moving the mask seems fine to me. Have you tried putting display: none on the mask when you want it hidden?

Share this post


Link to post
Share on other sites

So would I use

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

and

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

?

Thanks. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey,

 

Just for fun and a little tricky, but without a mask

 

See the Pen KKpQXyW by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 3
  • Thanks 1

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey @Paddy,

 

You are absolutely right. I was too quick, I thought too short.
Even if the paths overlap, the problem is not solved.
Just a little fun.

 

See the Pen dyodLyN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hey,

 

Sorry to interrupt you. I have a new idea.
It didn't let me go!

 

See the Pen WNvMqrE by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×