 |
 |
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 >