Leaderboard

Hi @distrox, Welcome to the GreenSock Forum. .play(): Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play (0) or .restart() https://codepen.io/mikeK/pen/jjQerz You could use this QuickTip also. Happy tweening ... Mikel

Hi @JackyWang, Welcome to the GreenSock Forum. Interestingly case ... https://codepen.io/mikeK/pen/rEQRYL Happy tweening ... Mikel

If I understand your question correctly, sure, there are multiple ways to do that. That's basically what MorphSVGPlugin does. See https://greensock.com/morphSVG Or if you need fine-grain control of each point, you could just animate their coordinates as generic objects and use an onUpdate to apply them however you want, like in an SVG path data string (or whatever). Does that answer your question?

Hi @greg_mich, This example illustrates the possibilities very well https://codepen.io/GreenSock/pen/17b4f47aa28f02e305dab386e9f79e89 Happy tweening ... Mikel

TweenMax.to(this.$refs.keyboardContainer, 0.35, {scale:this.zoomRatio, force3D:false, transformOrigin:"center top"}); Happy tweening.

Hi @SimonDucak Animated handwriting is a bit tricky. I know the effect you're trying to achieve, but drawSVG only works with strokes - not fills. You have a couple options. The easiest would be to create a mask for the text and animate the stroke of the mask to reveal the filled path. The other option is to create an open path that looks like the actual font. I wrote a couple posts on CodePen about how to create a handwriting effect. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here's the demo I made as part of those posts. Hopefully that helps. Happy tweening.

Hi Folks, I have been trying to add a SplitText animation to my accordion menu but I cannot get the revert function to work, and apparently, it doesn't work in the GSAP example either. In the tutorial video here: http://www.greensock.com/splittext/ , at the 8:21 mark Carl shows how calling function allDone() { mySplitText.revert(); } returns the animated string elements back to a single div. However, in the CopePen example at: http://codepen.io/GreenSock/pen/mvhak the same function is used but the string is not being reverted back to a single div. I am getting the same behavior in my own attempts. I can't figure out why but hopefully someone here knows. Additionally, is it possible to chain separate SplitText animations and stagger their starts? I have tried chaining a few SplitText animations into a TimelineLight but not getting this to work. Thanks so much for any info. --Kevin

Sorry about the confusion - that sample was missing a parameter. If you look at the docs, it shows that after the vars parameter, there's "stagger" (0.01 in this case), then "position" (which is the one that's missing here), and THEN the "onCompleteAll" callback. I just updated the codepen, adding the position parameter (the default of "+=0"). And yes, you can absolutely chain animations together - TimelineLite gives you pretty much unlimited flexibility. You have total control of the placement of every animation. var tl = new TimelineLite(); tl.staggerFrom(...); tl.staggerTo(...); ... You can define a "position" parameter to control precisely where things get placed (see the docs at Does that help?