Leaderboard

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/

You could just separate that part into a different tween that has a longer delay, like: TweenMax.to("#box", .5, {delay:2, x:615, y:615}); TweenMax.to("#box", 0.2, {delay:2.3, scale:1}); Of course you could easily set it up in a timeline if you prefer: var tl = new TimelineLite({delay:2}); tl.to("#box", .5, {x:615, y:615}) .to("#box", .2, {scale:1}, "-=0.2"); I personally find it easier to set things up in their end states and then use from() tweens to animate them into place instead of doing the math to figure out the opposite. So if I were you, I'd do it like this: Happy tweening!

Lots of stuff going on there. Maybe the problem is here. Try setting the stagger to a higher value than 0.01. function setOut() { //outro // staggerTo will return a timeline - need to later reconstruct the stagger - see animateFromDb() tl.staggerTo(quoteSplit.words, 0.4, {autoAlpha:0, scale:0, ease:"magneticOut", data:{tweenType: 'staggerTo', staggerTime: 0.2, staggerPosition: `+=${messageDisplayTime}`, staggerDuration: 0.3, params:{autoAlpha:0, scale:0, ease:"magneticOut"}}}, 0.01, `+=${messageDisplayTime}`); }

What conflicts? You're creating problems, not solving any. If you want your GSAP stuff to be part of a certain scope, create an object for GreenSockGlobals, like here.

Hi @christopherduffy, this could be a way ... In a timeline two separate animations, the second positioned 0.2 (see this). You can control it by the GSDevTools (see here) ... Happy tweening Mikel

Hi Chris, I'm glad that you can look back in the forum. I admire your work! Therefore, the LIKES on Monday. You deserve a top status. Best regards Manfred Kempener (Mikel)

@Cristiano very nice example. Just be mindful of doing anything in render. You are better off leveraging the lifecycle methods for components. If you get a tic, check out my previous posts, and in particular this codepen If you have a specific question, please ask, and I can do my best to answer.

Hi, This is an interesting challenge that reveals how useful and flexible the GSAP API is. It also reveals how some techniques can blow up in your face if you don't think of all the ways you need your animation to run / behave. The meat of this challenge (placing the cursor ahead of the character that was just typed) isn't really related much to GSAP. You just have to use a little JavaScript or jQuery to figure out the position of the current character (left and top) and then the width (to position the cursor along the right edge). This can be achieved by some pretty basic jQuery methods like offset() and width(). However the trick is applying those values to the cursor at the right time. Since you are using a staggerFrom() to drive you typewritter, its possible to use an onStart callback to call a function each time a letter is revealed. In this function you just figure out the position of the target of the tween (current character) and place the cursor to the right of it. You can see my quick and dirty demo here: http://codepen.io/GreenSock/pen/qEoerY?editors=001 tl.staggerFrom(chars,0.01, {opacity:0, ease:Power1.easeIn, onStart:placeCursor}, 0.08, "+=0.1", blink); function placeCursor(){ var thisLetter = $(this.target) //target of the current tween var pos = thisLetter.offset(); var width = thisLetter.width() cursor.css({left:pos.left + width, top:pos.top}) console.log("start", thisLetter.html(), left, pos.top) } This works ok for a one-off type of effect. However, its pretty poor if you want to reverse the animation. You will notice when the timeline yoyos that the cursor does not move. This is because the onStart callbacks do not fire when timeline is reversed (by design). Another bad thing is that each time a letter is revealed (on every iteration) the DOM is being queried and I'm doing all the offset() calculations (which some could argue could hurt performance). Open the console to see how often that onStart callback fires. Ouch. Here is a better version: http://codepen.io/GreenSock/pen/QwmegN?editors=001that uses a loop to generate the timeline. //loop throug all the chars and make them visible AND set cursor to their right at same time $chars.each(function(index, element){ var $element = $(element); var offset = $element.offset(); var width = $element.width() tl.set($cursor, {left:offset.left + width, top:offset.top}, (index +1) * revealInterval) tl.set($element, {autoAlpha:1}, (index +1) * revealInterval) }) In this version I give each character a class of "char" (using charsClass:"char" in the SplitText vars). I then use jQuery to loop through each element with class of "char" For every char I insert 2 set()s into a timeline, one that reveals the character, and one that moves the cursor. The main advantage here is that the animation can be reversed and we do minimal DOM querying and measuring. Once the timeline plays through the first time all the cursor positions are recorded. I initially had the cursor blinking the whole time, but realized that it looked better if the blinking only happened when the typing was not happening. I created a blink function that is called and the beginning and end of the timeline to handle this. Although it may not be immediately apparent this allows the timeline to have variable delay and repeatDelay values. For instance I can have the timeline wait for 3 seconds before repeating without having to add 3 seconds of blinking cursor animation into the timeline. Another benefit is that I could add play and pause buttons that toggle the blinking of the cursor appropriately too. Hopefully this helps.