chevohin

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: 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 https://codepen.io/chevohin/pen/abmJxNP And the second way you mentioned was: 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: https://codepen.io/chevohin/pen/JjRWVZP It has the same problem with not relative coords.

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. https://codepen.io/chevohin/pen/QWKpoBK

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?

Zach, i changed onStart to onRepeat, but it doesn't call my function. What am i doing wrong in this new codepen? https://codepen.io/chevohin/pen/LYRPRYG

Hi guys, could you please explain me how it works? I have a jumping ball. I want some functions to be called on start and at the end of each jump. If I use onStart() and onComplete() methods, it runs start function only once and doesn't run finish function at all. I guess, onStart() and onComplete() methods mean the start and the end of the whole timeline, but not every iteration. What is the best way to call functions on start and at the end of each iteration?

Thank you, bro!

Hi guys, i need your help. I have a scene in adobe illustrator which I export to svg and insert in html. Somewhere in the scene I have a group with id #toy and a path with id #path (I made the path visible). After the click on #toy I want it to move along the #path. In my scene now after the click, the #toy just disappears. I think it is because of some relativeness, so may be it adds the path coords to its current coords. What should I change to fix it? I want the moving object and the path to be in the same svg.

Hey Zach, thanks for your detailed answer with several options! This time I will use the first one but also i'll take the second one into my consideration. I see how you changed my code using defaults to make it more efficient. I will definitely read your article, bro.

Hi guys, I'm new here, I'm pretty sure my question was discussed before but unfortunately i couldn't find any information. I have a simple animation that happens on click. Idea is that when I click on the snowman, his hands should go up and then back down. If I click on the snowman once and wait till animation finishes, it is absolutely okay. After that I can click on the snowman again, and it will be okay. But when I click, animation starts and I click again before animation finishes, snowman's hands stop in some place and don't get back in their initial position. New clicks don't help, only page restart returns his hands back down.. I don't understand why does it happen? What are the best ways to prevent this behavior?