Leaderboard

Hi @Tompy and Welcome to the GreenSock Forum! I'm glad you got it sorted, let us know if you have any additional help. Happy Tweening!

Hi @flowen As @mikel mentioned, you need a stroke for DrawSVG to work its magic. Handwriting is a bit tricky to get right as you need an open path. I wrote a couple posts about the technique. Maybe you'll find some of the information to be useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Hopefully that helps. Happy tweening.

Its very difficult to give general advice on complex UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you . Directions on using GSAP with CodePen can be found here: I would definitely suggest that you try just getting something follow the mouse on hover first. This demo from @Sahil illustrates a very popular effect that has some similarities to what you want to do. Perhaps it can help you get started. mouseover the little arrow in the bottom left corner.

Ahh makes sense! Must have missed that detail in the docs, I've updated the code now, thanks!

svgOrigin doesn't support percentages. It needs pixel based values. In your case you'd want the center of your SVG. svgOrigin: '37.5 37.5' Does that make sense? Happy tweening.

Hi @flowen, You can not animate the svg as such by drawsvg - only the stroke of an svg element. The name is easily misleading. DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> Plus: your 'setup of the SVG is perhaps incorrect', no single strokes as you expected - look at this Best regards Mikel

Yes, the site you referenced is using TweenMax. The demo @mikel gave you is a fantastic starting point... if not an end point of what you need to do. GSAP is an animation engine, which means you are still required to write code to tell it what to do, as such it is virtually limitless in its flexibility and complexity of use. Its not like fancybox or some jqueryplugin that automagically takes a few DOM elements and spits out a fully functional widget or slideshow for you. Reading the getting started article should definitely help explain how it works.

Managed to fix it with a few changes! tween.play(0); tween2.play(0);

Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!

GSAP has quite literally changed my life (for the better). Thanks @GreenSock! Awesome post, @PointC!

Hi @teejay_hh, As @OSUblake already mentioned, it can also be calculated. Combine var number with the search input / 'output' and everything will be fine. Happy searching ... Mikel

I'm not sure if there is a question here. Your pen is using jQuery to toggle classes and CSS transitions. Are you asking how to do the same thing with GSAP? You can toggle classes or you could just animate the x position of those elements If you're just getting started with GSAP, I'd recommend the learning section here: https://greensock.com/learning Happy tweening.

Great explanation. It all makes perfect sense now. Thanks very much. I'll do the separate tween thing. GSAP is fantastic.

I think this is what you meant to do, right? It looks like you were creating some fromTo() tweens (which have immediateRender:true by default) and THEN running the pathDataToBezier() and aligning things in that different position. It was a timing issue. I reorganized things to run that initially, and set the xPercent/yPercent/transformOrigin on the necessary elements. Make sense?

Really nice work on the latest demo, @PointC! Nice touch with the little viewBox toggles & color themes. And of course a big "thanks" for the kind post. You made my week. ?

I got the same result using vanilla JS, but I don't know if it is a bug. @GreenSock will have to verify that one. I wouldn't expect it to work because you're trying to animate objects with different types in the same tween. Elements will use the CSSPlugin to set x, while a regular JavaScript object doesn't need any plugins. I've accidentally done that a few times in the past, and I've learned that it's best not to mix different object types.

Update: We found someone!

Hi valente97, You can controll all animations with exportRoot: