Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard


Popular Content

Showing content with the highest reputation on 11/18/2017 in all areas

  1. 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/
    2 points
  2. 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 thi
    2 points
  3. 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}`); }
    1 point
  4. 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.
    1 point
  5. 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
    1 point
  6. 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)
    1 point
  7. @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.
    1 point
  8. 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 meth
    1 point
×