christopherduffy

Thanks to everyone who replied. I'm looking forward to investigating those codepens.

Is it possible to use GSAP to animate a handwriting effect with a break or gap in the stroke to replicate the interlocking letter effect seen in the attached image between the tail of the "g" and the "a"?

Thanks for all the responses, the previous method worked for me. This is what I was trying to make. https://codepen.io/christopherduffy/full/xPPEMg/

Hi, I'm trying to make an element tween from off screen and land on a point while scaling down. I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box. Any advice or guidance would be great.

The combination of killTweensOf() and set() worked. Problem solved.

That is the issue. I am only using two tweens, active and idle, in order to reduce the amount of code needed. At the moment a combination of killTweensOf() and set() to reset the position seems to be working in my demo. I will try applying this to my main project after work tomorrow. If this doesn't work I will try your method of creating individual tweens. Thanks for the advice Sahil.

Thanks for the response. I'll keep future demos on point. The issue is that I need to pause a tween on a specific element while the other elements using the same tween continue, which .seek() doesn't allow.

Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP. The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax. I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed. I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween. What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question. The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1" and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween. I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far. Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days. Thanks