And lest we forget, there's also WebGL, for which the most often used
library is Three.js. You frequently encounter mind-blowing WebGL/Three.js
animations on CodePen and Daniel Velasquez has a newsletter highlighting
different techniques.
https://offscreencanvas.com/issues/
On Thu, May 4, 2023 at 12:12 PM Panetta, Alyssa A <[log in to unmask]>
wrote:
> 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
>
|