Search Results

.gifv is a file format that was made by Imgur. It is less of a .gif and more of a video file. Specifically, it compiles in the end to either .mp4 or .webm formats (at the time of writing this - they m …

It's planned to get full CSS animation support but currently only some are supported and can be buggy with cross browser issues. … There are countless other SVG animation libraries, Snap.svg is another big one, but most don't handle animations nearly as easily or as performant as GSAP. …

I recommend going through my answer there fully to get a better sense of animation on the web. … You can also create these by hand using Canvas or SVG but it'll be a painfully long process if your animation is very long. …

Sprite Another way to keep a smooth but highly styled animation is to use a sprite. Google uses this approach for things like logo animation. … Libraries like GSAP let us do crazy things like slow an animation on hover by keeping track of the animation matrices. …

Try out LottieLabs. They have a web based editor, so I assume it will work for Linux devices. Alternatively, use Rive which has a similar format but (from what I can tell) generally has a smaller file …

Here's an example text animation effect using GSAP's slowmo ease. Carl (SnorklTV) has an antire mini-series on GSAP easing including a focus on slowmo if that interests you. Check it out! …

In general this sort of transition is called a wipe. I might call it a "layered horizontal wipe". It's generally done by layering two images and then animating a clip path that's applied to the top im …

It does not move to the start location because that's simply not how it is works. If you need to compensate for offset the cx and cy you could add a transform. Or just remove them. In general you sh …

I specialize in web animation and just call myself a frontend developer most of the time. Over time you'll come to learn that titles don't mean that much, although they do mean something. …

To do a directional fade in, put the image you want to be revealed at the bottom layer. Put the image visible at first above it. Then put the gradient or other mask on top. As the gradient or mask m …

The main technology in use is WebGL. As for what tools they used specifically, you'd have to ask them. It's likely the did part of it in a software like Unity.

The next easiest thing would be to again convert to SVG and then use an SVG morph animation to go between the two, using something like GSAP's MorphSVG plugin, Snap.svg, or Kute.js SVG plugin (this is …

The logo is not dependent on the animation to give the desired impression. The animation itself fits the desired branding (see this post for the difference between logos and branding). … The animation itself is of good quality (a whole other post could be made defining exactly what "good quality" encompasses) and used in only appropriate settings. I can't think of any drawbacks. …

So yes, animation is within the scope of graphic design. Whether or not a graphic designer should be familiar with creating animations depends on the needs and opinions of the people involved. … Whether or not a particular design should use animation depends on the needs and purposes of the design. …

Is it feasible? Yes. Just as you have thought about it, it is definitely possible to do it like that. A better question is "Are there better ways to do this?" in which case I would answer probabl …