Paddy Posted March 10, 2020 Share Posted March 10, 2020 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 More sharing options...
ZachSaucier Posted March 10, 2020 Share Posted March 10, 2020 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? Link to comment Share on other sites More sharing options...
Paddy Posted March 10, 2020 Author Share Posted March 10, 2020 So would I use gsap.to("#redMaskHandler", {display: "none", duration: 0, delay: 7}); and gsap.to("#redMaskHandler", {display: "block", duration: 0, delay: 7}); ? Thanks. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 10, 2020 Share Posted March 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
PointC Posted March 10, 2020 Share Posted March 10, 2020 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. 5 Link to comment Share on other sites More sharing options...
mikel Posted March 11, 2020 Share Posted March 11, 2020 Hey @Paddy, Another option: you could 'change' the shape of a clip-path: See the Pen RwPQRoG by mikeK (@mikeK) on CodePen Best with the gsap MorphSVGPlugin See the Pen LYVQRzz by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 3 Link to comment Share on other sites More sharing options...
Paddy Posted March 11, 2020 Author Share Posted March 11, 2020 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 More sharing options...
ZachSaucier Posted March 11, 2020 Share Posted March 11, 2020 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++) { 4 1 Link to comment Share on other sites More sharing options...
mikel Posted March 11, 2020 Share Posted March 11, 2020 Hey, Just for fun and a little tricky, but without a mask See the Pen KKpQXyW by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 1 Link to comment Share on other sites More sharing options...
Paddy Posted March 12, 2020 Author Share Posted March 12, 2020 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 More sharing options...
Paddy Posted March 12, 2020 Author Share Posted March 12, 2020 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 More sharing options...
mikel Posted March 12, 2020 Share Posted March 12, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2020 Share Posted March 12, 2020 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 More sharing options...
mikel Posted March 12, 2020 Share Posted March 12, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now