Leaderboard

That's a deep dive into SVG. I played around a bit I could get it to work with 2 separate text items but couldn't manage to line things up with tspans in the same text item regardless of how I adjusted x,y,dx,dy. Of course bear in mind I didn't have clue what I was doing. If you're working with dynamic text maybe you could add some logic to split your strings to write to multiple text items? Then again maybe someone will come along that actually knows about this and has a real solution? Found a discussion on STOV about inserting breaks with svg text spans might point you in the right direction. https://stackoverflow.com/questions/49063695/how-to-insert-line-break-in-svg-tspan-element

I'm awesome at spotting typos. I can spot every single typo in any email I write exactly 100 milliseconds after I press 'send'.

The worst thing is when you spend two hours visiting forums, rereading documentation, rewriting it ten different ways... end up convinced that you have no idea what you're doing and then you see it... but for the typo, what you had to begin with, was fine. ?

I'm not gonna dive too deep into the weeds here since you're new to SVG and this isn't really a GSAP question. SVG text is a bit of beast and cross browser consistency is a fantasy. SVG text is tough enough, but when you start adding textPath and textLength into the mix it gets even more frustrating. For example, animating textLength is different in FF and Chrome on a textPath. Chrome will only animate the textLength of the textPath element, but FF will only animate the textLength of the actual text element & Edge won't work at all Here's a quick example: Even when you're not using a textPath, Edge is a nightmare to use with textLength. I had to get creative animating some text from the center here: Here's a thread I wrote about the two demos above. You're also throwing another layer of complexity in here trying to intelligently break lines of text into multiple levels on the same wedge. I'm not sure how I'd approach that. I'd have to think about it a little more. Here's a demo in which I broke apart SVG text and measured the size of each character's BBox so I could explode the words. Maybe the above info will point you in the right direction or give you some ideas. What you're trying to do is not trivial and cross browser support will be tricky. If you have limited variations of text, I'd recommend @mikel's approach and create the paths ahead of time in your vector software. If the text is dependent on some user input and variations are therefore unlimited, this will be a bit of a challenge. Hopefully that helps a bit. Happy tweening.

We generally try to keep these forums focused on GSAP-specific questions, but I'd suggest Googling event.preventDefault() - that's generally how you'd stop the default behavior of a click event. It'd be a lot easier if you had a codepen demo that we could quickly edit for you, so if you still need some help, please provide one of those. To learn how, see: Happy tweening!

Hi @kissu, Welcome to the GreenSock Forum. For me it's easier to build such layouts completely in INKSCAPE. The text is finally converted to paths. Before doing so, make sure you have a copy to make changes to the text later. Happy tweening ... Mikel

Hi, Yeah it is by design. A stagger method in a timeline returns a TimelineLite instance with a TweenLite instance for each element in the array passed to it, and since getLabelsArray is a method of the TimelineMax constructor you're getting undefined. Also keep in mind that, besides the parameters of each stagger tween passed in the stagger method, you have no further control over those instances created by these methods. If you want to place a label where each stagger animation starts, you might want to take a longer road and use a loop in order to create each individual tween and place the desired label inside a TimelineMax instance. The current code you posted, only gives you the possibility to add a label when the first stagger tween created by each stagger method starts. Beyond the fact that: console.log( children[i].getLabelsArray ); // -> undefined There is not much I can infer from that code. Perhaps you can provide a few more details in order to get a better grasp of the roadblock you stumbled in your code. Happy Tweening!!

OK, I ended up like this, case closed const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) TweenMax.to(circle, 0.5, { x: e.clientX - rem/2, y: e.clientY - rem/2 }) I assume there's like a zillion different units in CSS that needs to be implemented so calc could work smoothly, so it's bettter to do that in JS.

I really like SVGO for optimizing SVG code. The web app version is here: https://jakearchibald.github.io/svgomg/ & the command line version is here: https://github.com/svg/svgo

Correct - this is why I tried writing that hideInactiveOverlays function after you kindly provided the factory function solution. I figured that there would be flickering if I did this. Yep, basically you're right. Unless I introduce a 5-10 frame buffer for the purposes of solving this problem. Hmm...I'll add that to the possibilities list, down the bottom ? This is a red hot option, although would be a significant re-code server side. It may be worth it in the long run though because I could hide things with more certainty. Thanks, I'll look into that. Wow. Okay, so this is cool. Not only does this validate the way I've been doing things on my end - as a lot of that code resembles my own, but its also provided significant education on what's possible using delayedCall() in respect to the timeline. I'll re-group, re-code and reply when I've got a working solution to let you know how I went. Thank you so much @Dipscom and @GreenSock for your perseverance and sagely advice! ? QA

Awesome work on the animation mate. I noticed it's also fully responsive well done!

Hi @jp_uk81 The problem is you're using a closed (filled) path and adding a really thick stroke to your mask path. That can work in some situations, but ideally you'd want an open path to act as your mask and use a stroke-width just wide enough to cover the underlying artwork. With the filled path you are currently using, a stroke is added to the outside of the path and not producing the results you want. Here's a fork of pen so you can see what's happening. I've just used your mask paths and a red stroke to highlight the issue. See what I mean? Animated signatures and handwriting can be a bit tricky. I wrote a couple posts about it: https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here's the demo from the tutorial. You can follow the same handwriting technique to create the actual font or for use as a mask. Hopefully that helps a bit. Happy tweening.

That's because your artwork is outlined - it's not a single stroke that goes through the center of each letter. For example, I added a copy with a red stroke here: See the problem? Animating that stroke isn't going to unveil the artwork underneath as you'd expect. You'll need to adjust your artwork accordingly, like draw a path over the top (NOT around the outline). Happy tweening!

For the premium plugins, you will need to be a ClubGreenSock member, yes. You won't need a Business green if you are going to be using them for ads. And the premium plugins will not be on CDNs, they will have to be added to your own JS payload. Note that many plugins do not need a paid Club membership.

Sometimes it's like playing charade, hard mode on....

Although we bought it the business green or whatever package the major reason we can't adopt GSAP today is because it doesn't have type declarations.

I'm creating a new set of definitions for the project I'm currently working on, but they aren't complete. I've only added the stuff I needed, but we can add to the package when I'm done. If you need any definitions for a plugin or something, just let me know, I can post it.

Try this one. They're not 100% complete, but should be ok for normal usage. npm install --save @types/gsap If you import files individually like this... import { TweenLite, Linear } from "gsap/TweenLite"; import { TweenMax } from "gsap/TweenMaxBase"; import { TimelineMax } from "gsap/TimelineMax"; import "gsap/CSSPlugin"; Or all of them like this this... import { CSSPlugin, TweenMax, TimelineMax, Linear } from "gsap/all"; Then you'll need to declare the modules in a d.ts file somewhere. So something like this. This isn't complete. Just showing how. declare module "gsap/TweenLite" { export { TweenLite as default, TweenLite, Animation, Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin } from "gsap"; export class EventDispatcher { } } declare module "gsap/TweenMaxBase" { export { TweenMax as default, TweenMax } from "gsap"; } declare module "gsap/TimelineLite" { export { TimelineLite as default, TimelineLite } from "gsap"; } declare module "gsap/TimelineMax" { export { TimelineMax as default, TimelineMax } from "gsap"; } declare module "gsap/CSSPlugin" { class CSSPlugin { } export { CSSPlugin as default }; } declare module "gsap/all" { import CSSPlugin from "gsap/CSSPlugin"; export { CSSPlugin }; export * from "gsap/TweenLite"; export * from "gsap/TweenMaxBase"; export * from "gsap/TimelineLite"; export * from "gsap/TimelineMax"; }