chevohin Posted December 15, 2020 Share Posted December 15, 2020 Hi guys, please help me to find a solution to my problem. I have 6 elements that are all nested in #allElements group. Also I have a white mask (#maskCode) inside the defs which is the same shape as the red area. You can see how all the elements look like and where they are located in the attached image. I created a mask because I want only an element that is inside red area to be seen. When I click "up" or "down" button, I move #allElements 110px up or down, and I don't move the mask. But I always see only one element. So my first issue is why is it so and what is the best way to fix it? See the Pen KKgWEwd by chevohin (@chevohin) on CodePen Link to comment Share on other sites More sharing options...
chevohin Posted December 15, 2020 Author Share Posted December 15, 2020 And my second issue is when I'm clicking on the buttons with a good delay, everything is okay, they move 110px up every time and 110px down, so all the elements should be always in the center of the red area in the end of each animation. But if I click buttons before the animation finishes, it starts a new animation with current middle coords, so the elements get in a bad position. In my next pen I tried to make an independent timeline and play it with myTimeline.play(0) but it looks like it isn't relative, so it always start from the same point. And "repeatRefresh: true" doesn't help. See the Pen QWKpoBK by chevohin (@chevohin) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted December 15, 2020 Share Posted December 15, 2020 For the mask issue, you'll want to use a group inside your masked group and animate that rather than the masked group itself. See the Pen 7207e8e3f2290baa6e24f057fc290c5e by PointC (@PointC) on CodePen For the rapid clicks, I'd probably check to see if the element is tweening and return if true. You could also create a timeline and use the up/down buttons to increment/decrement the position of the group. Just my two cents. Happy tweening. 6 Link to comment Share on other sites More sharing options...
chevohin Posted December 16, 2020 Author Share Posted December 16, 2020 Dear Craig, thanks a lot for your answer, i really appreciate your help. Everything is clear for me with my first issue now. But I couldn't understand yet how to fix the second one. You said about two ways. The first one was: 43 minutes ago, PointC said: For the rapid clicks, I'd probably check to see if the element is tweening and return if true. Is there a way to see if the tween is active if it is just a single tween not stored in a variable like it was in your pen? I don't know this way so I created a new variable for the tween. let tweenUp = gsap.to("#moveGroup", {y:"-=110", paused:true}); and then in my goUp function I check if the tween is active: if (!tweenUp.isActive()){ tweenUp.play(0); } Now it checks correctly if the tween is active, but it started using not relative coordinates, so it always repeats the same animation with the first two elements. Adding "repeatRefresh:true" to the tween doesn't help. The whole codepen with this attempth is here See the Pen abmJxNP by chevohin (@chevohin) on CodePen And the second way you mentioned was: 54 minutes ago, PointC said: You could also create a timeline and use the up/down buttons to increment/decrement the position of the group. Isn't it the same way I tried in the codepen number 2 (with the question about the second issue)? Their I created two timelines and tried to increment/decrement group's coords. Here is the new version of that pen with fixed mask issue: See the Pen JjRWVZP by chevohin (@chevohin) on CodePen It has the same problem with not relative coords. Link to comment Share on other sites More sharing options...
PointC Posted December 16, 2020 Share Posted December 16, 2020 10 minutes ago, chevohin said: Is there a way to see if the tween is active if it is just a single tween not stored in a variable Yep. That would be the gsap.isTweening() method. https://greensock.com/docs/v3/GSAP/gsap.isTweening() Here's a fork showing how to add that to your listener functions. See the Pen 3ec13643cf7f56c1c2abeb4d594a48f6 by PointC (@PointC) on CodePen When I mentioned a timeline, I meant that you'd animate the playhead of the timeline to a specific time() or label. Though I think I'd go with the isTweening() method as it's a bit easier IMHO. You may also want to add a check to limit how far in each direction the group can travel. That way you don't go past the first or last icon. Just my two cents. YMMV. Happy tweening. 4 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