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 <CODE4LIB@LISTS.CLIR.ORG> on behalf of Joe Hourclé 
<onei...@annoying.org>
Sent: Wednesday, May 3, 2023 9:09 PM
To: CODE4LIB@LISTS.CLIR.ORG <CODE4LIB@LISTS.CLIR.ORG>
Subject: Re: [CODE4LIB] Animation detective

>
> On May 3, 2023, at 8:49 PM, charles meyer <reachmepl...@gmail.com> 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

Reply via email to