geedix

Hi @Mishap, this isn't something I would expect GSAP to do, since it's not animation, but it's something I often wish I could accomplish, myself. I use a pen plotter that draws strokes, not fills. How did you go about scripting the conversion of outlined letters into single strokes? Not good enough for your purposes, but maybe good enough for some of mine!

My last sentence was about keeping file sizes low. As long as you just have a few words of text, a PNG format text image should be pretty small, even if you've used it at 2x dimensions. For other kinds of images, just experiment with using large dimensions (600x500 in a 300x250 banner), but add more compression, and you can get a sharper look at a similar file size. Make sense?

Hi Fatima, To get your PNGs to look sharp on high-density displays, you need to embed them at higher resolution. So, for a 300x250 png or jpg, make it 600x500, and position it to 300x250 in your html. For flat type, the file size should be okay as a png, but for photos, add more compression, and it will still look better than it would have at 1:1 dimensions.

Hi Eden, Yes, by default the timeline will repeat using the random values it finds on its first play, unless you add repeatRefresh=true. I think this will keep your rough ease looking random on each repeat, too. https://codepen.io/geedix/pen/zYXBNvL

I've noticed that when I remove devTools from my cpu-heavy animations, the start gets a little rough. There are flashes of elements popping into place. Is there something I can do to make it just as smooth after DevTools is gone? https://codepen.io/geedix/pen/QWPjBbx

Hi Fatima, when I built banners, we normally embedded type as compressed PNG images. The trade-offs -- SEO, accessibility, responsiveness -- are more acceptable in ad banners, since they run in i-frames of fixed dimensions. Long blocks of legal text were sometimes done with system fonts, or as limited palette PNGs. good luck!

Hi Jason, I do lots of SVG animation, and this is a point of frustration for me too. My usual process is to do make assets in Illustrator, animate with gsap, and fine-tune positions in Chrome dev tools along with the gsap dev tools for pause and play. It's hard to understand why Adobe doesn't make Animate useful for this. You can export individual svg frames with 'export image (legacy)', but they are not pretty to see in a code editor. I prefer to stick with Illustrator and lots of layers. I hope you get some helpful responses!

I'm looking into the PerformancePaintTiming API to see whether I can detect when the SVG is actually visible, and start my animation then. I'll let you know how it goes.

Thanks for the reply, GSAP Helper. I may not have phrased my question well, and this forum is probably the wrong place for it anyway since I don't think it's really a gsap problem. My animation always plays correctly locally, and I'm sure it would play fine on codePen until I added all the server junk like Vue, AEM, jQuery, Angular, FBevents etc . I guess I was hoping for something like, "just listen for the first contentfulPaint event instead of the load event" but I don't think there is such an event. It must be a problem that others smarter than myself have encountered: how to make sure the SVG is being displayed before starting the animation? For now, I've added a slight delay between the load event and the timeline play command, as a compromise.

I build a lot of long timeline SVG animations, like this one from last month, for example: https://www.pwc.com/us/en/industries/consumer-markets/library/2023-holiday-outlook-trends.html There's often an unpredictable delay (2 or 3 seconds) before my animation appears. Meanwhile, it's playing while hidden. I've tried adding a listener for the window "load" event before playing, but there seems to be other business happening between the load and display... Vue and Adobe AEM and who knows what else on the server side. Probably not a GSAP problem, but I wonder what else I can do to ensure that my timeline waits until it's visible before playing? Any advice? thanks

Here's your logo with stroke changed to #000 and fill changed to none: https://codepen.io/geedix/pen/eYbjvqE

Hi Ferrari, DrawSVG is for animating SVG strokes, but your artwork uses only fills, not strokes. To get a similar reveal effect with this art, you could use masks instead . Or, you could recreate your art using strokes instead of fills in order to use DrawSVG.

I actually came across Carl's helpful seamless looping staggers via this old thread: I had fewer glitches once I started syncing my loops accurately. In the end, I ditched my hand-drawn frame-by-frame animated smoke and went with a pile of circles that float up to randomized locations for a cleaner looking smoke on this project.

Watching my above example for a while, I notice that it's a little inconsistent. On some loops, background frames occasionally show when they shouldn't, or there's an instant with no frame showing. Maybe the playhead doesn't always hit the tick at exactly the right time to sync things up the way I have it written. A spritesheet is foolproof because it's only in one position at a time. Is there a way to make my approach with autoAlpha foolproof? So that one frame is always showing, and the others always hidden?

That would be useful for a spritesheet that changes position on each frame, but for me, hiding and showing frames that are all in the same position, I don't see a way to use Keyframes. thanks though