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

My example works fine: I have several frames in SVG that are animated using a 0 duration tween with a .12 stagger. However, I have a larger project where the same method isn't going so well. On and off states get out of sync upon repeat, there are overlapping visible frames and it's not as simple as I had hoped. Frame-by-frame animation must be a common thing to do. The examples I've found are changing the x position of a spritesheet rather than the visibility of an SVG group. Is there a smarter way to animate SVG frames? Maybe the method I'm using is good, and I just need to spend more time debugging my bigger project? thanks

I specialized in building animated display ads for many years. That work started drying up for me around 2017. Since then, I have found it easier to find animation projects that aren't banners. I think ad dollars are going to social and search rather than display advertising. I don't see many banner ads any more -- maybe because my browsers have ad blockers on? I'm curious too.

I don't know, you could just call the concept "falling cubes". You could get close with some randomized gsap tweens using a "bounce.out" ease. I would also look into the gsap Physics2d plugin: https://greensock.com/docs/v3/Plugins/Physics2DPlugin You would have to figure out your own collision detection, though. There are other libraries for that, but I haven't tried them. https://brm.io/matter-js/ looks fun. Good luck!

It's unusual to have a banner without internet! If you're trying to keep all your code local and lightweight, you might try doing your animation with just CSS, or use a smaller library like anime.js, which is 18k. You can't split GSAP into smaller components.

It doesn't look very legit to me, since there's no licensing info and you would need a commercial license for legit ad banners.

Hi Sean! I also came from print long ago. I led the banner development team at a big agency for several years. After Flash died, we did HTML banners with GSAP, but the demand for that work declined. The banners we did became more templated and data-driven and it was hard to squeeze any fun animation in. I agree that the market for freelance banner developers is declining. The ad dollars go more to social media and search. I have a friend that specializes in Google Dynamic Ads, and apparently I'm not the only one who couldn't find work doing those even after learning their complicated platform. I think your site looks good and professional. You might want to expand your focus beyond ad banners. I was fortunate to find non-banner work specializing in SVG animation with GSAP. I wouldn't recommend spending too much time on Animate CC or GWD unless you're really set on staying with banners. Stay curious, maybe try React, Svelte, After Effects, 3js. Good luck!

I'm not much of a coder but I can usually find a way. Here's a fork that loops through the cards onUpdate, and adds the class if a card is over a certain opacity: https://codepen.io/geedix/pen/gOBwWaq?editors=1111 Maybe poor for performance to do it this way, but it works.

Just out of curiosity, I made a pen of it: https://codepen.io/geedix/pen/abRdEBL I learned that Safari mobile is buggy in a unique way without the backface-visibility hidden style.

You can move that 2nd tween to happen a second earlier with a position parameter, like this: https://codepen.io/geedix/pen/zYmGRNV

It's a fairly complex thing to auto-scroll the ISI and let the user interaction stop it, so good job getting this far. If you go all-in with gsap, instead of setting the _scroller.style.top css to an even pixel (remainOffsetHieght is an integer), then you can tween the _scroller y position, which will use transforms and be smoother. Also, set interval (100) is only 10fps, not very smooth looking. If you do everything with gsap, you won't need setInterval. hope that helps