Hi Charles,

A lot of cool web animations happen directly within the code these days using CSS, SVG, and JS, so what you're seeing might not be created by external software -- it might actually be happening within the page's source code. If it is, using your browser's Dev Tools panel, you'll be able to get an idea of how it was done.

Most simply, it could be a CSS animation, which you could inspect using the Animation tab: https://developer.chrome.com/docs/devtools/css/animations/. If you're comfortable with CSS, you might try writing your own: https://learn.microsoft.com/en-us/shows/one-dev-minute/getting-started-css-animations

More involved animations (more than a rotate, flip, scale or translate), usually use SVG graphics and need some Javascript. When you inspect the element, if it's SVG, you'll see tags like <svg><path> and <g>. You'll see evidence of Javascript animations in the Sources tab. There's a great JS library for creating animations called GSAP: https://greensock.com/gsap/ and if the site is using it, you'll see a Source that has "/gsap/" in its path. Here's a great introduction to SVG Animations with GSAP: https://www.youtube.com/watch?v=POBxxUkvHi4.

To me, SVG + GSAP is the best and most interesting method of animating on the web, but it does have a learning curve, so I'd recommend getting started with CSS animations as a first step.

Best,
Alyssa



Alyssa Panetta
Web Designer/Developer
University Libraries
University at Albany

________________________________
From: Code for Libraries <[log in to unmask]> on behalf of Joe Hourclé <[log in to unmask]>
Sent: Wednesday, May 3, 2023 9:09 PM
To: [log in to unmask] <[log in to unmask]>
Subject: Re: [CODE4LIB] Animation detective

>
> On May 3, 2023, at 8:49 PM, charles meyer <[log in to unmask]> wrote:
>
> My esteemed listmates,
>
> If I see animated graphics on a Web site, is there any way to look in the
> page source code to detect which software created that animation?

It wouldn’t be in the source code, unless the animation is actually a slideshow that’s being generated by JavaScript.  (Which is useful to allow people to speed up or speed down animations for analysis purposes)

Most others will just tell you the file type, which won’t necessarily tell you what created the file.

If you download it, and open it in an appropriate viewer, you can try to check if there is any metadata attached.  Sometimes the software will write something in there about who and what created the file.

-Joe