10 web Front-end animation plug-ins essential for programmers

10 web Front-end animation plug-ins essential for programmers
1. animated SVG frame slides

When switching between slides, the animated SVG frame's experimental slides are displayed. Different shapes can be used to create various styles.

We want to share an experiment slide with you. Our idea is to make SVG frames animated when converting from one slide to another. With different shapes, we can create various frame styles when changing the SVG path. This idea was inspired by Dribbble: Chapter 06 is too mediocre. We use animations of anime. js.

Online Demo

Source code download

2. background decoration of WebGL

A set of decorative shapes that are displayed as backgrounds using WebGL. These shapes are created by Three. js and animated using the TweenMax library.

, We will explore some original and experimental backgrounds generated using WebGL. The main idea is to display interesting animated shapes as decorative page backgrounds, some of which have subtle interactivity. All the demos are various shapes created using the Three. js WebGL library. animation is controlled by the high-performance GSAP animation library.

Online Demo

Source code download

3. Creative SVG stroke Animation

An animation that allows you to touch bike illustrations driven by SVG and GSAP.

SVG stroke animation is nothing new, but when using a more complex painting consisting of strokes, we can create a very primitive effect. Using many different colors and adding some other element animations, we can bring a very unique look to illustration life.

Online Demo

Source code download

4. Expand the mesh project Animation

The thumbnail-Zoomed mesh project animation when the Detail View is opened.

We would like to share a simple implementation of your mesh animation is based on Dribbble's shooting surfing project by Philip slováw.ek. When you click a grid project, the background and thumbnail are enlarged and moved to its full screen position. Although the Dribbble lens is a mobile animation, we think we can also explore this concept on the desktop.

Online Demo

Source code download

5. Kylo Ren CSS page preloader

The Star Wars Kylo Ren page preloader, which is made with HTML and CSS only.

We want to share something a little different from you: an image-free Animation "Star Wars" only sponsors Kylo Ren to be made with HTML and CSS.

Online Demo

Source code download

6. Dynamic Shape coverage and SVG

Some ideas are superimposed on the shape of multi-layer SVG to dynamically generate attributes that can be adjusted with various effects.

We would like to share another method for page deformation conversion. This time, we will use JavaScript to generate multiple SVG curves, making many different appearances possible. By controlling the coordinates of several SVG paths, the curve shape is generated by using a viscous moving rectangle (superposition. We use some good easing functions in glsl-easings. By adjusting curves, speeds, and latency values, we can produce a lot of interesting results.

Online Demo

Source code download

7. Liquid deformation effect

Slide display of Liquid Crystal distortion effects in WebGL driven by PixiJS and GSAP.

We 'd like to share with you an interesting distortion effect. The main concept of this demonstration is to use a displacement map to distort the underlying image and give it different types of effects. To demonstrate the liquid conversion between images, we created a slide. A displacement texture usually uses an image as a texture and applies it to an object later to show the assumption that the underlying object is wound around the texture. This is a technology commonly used in many different fields, but we will explore how to apply it to simple image slides. We will use PixiJS as our Renderer, filter engine and GSAP animation.

Online Demo

Source code download

8. Dual-image slicing Layout

Some la s have slice background images, slide functions, and Glitch effects.

We want to share some images with you. The idea is to display some text elements in the grid layout and change the content and image as a slide. For background images, we have created a plug-in with some additional options. To make an interesting transition, we use a glitch effect. This effect also applies to some text.

Online Demo

Source code download

9. Idea of organic SVG shape Deformation

The idea of a group of organic shapes. Demonstrate some interactive ways to use animated SVG deformation on websites, including menu hover and content display.

We hope to share with you more animated organic SVG shapes. This idea is to integrate some smooth and natural shapes into a webpage as a decoration element. Sometimes there is an interaction, that is, the context of the menu that is hovering over a menu item, or simply put, A design inspired by Kevin for continuous animated wave background Magel. In one of the demos, we also used some modes and cutting paths to get full-screen animations to show other content. The deformation paths and other animations in these demos are supported by anime. js.

Online Demo

Source code download

10. deformation page Conversion

A simple page deformation conversion effect. When the current page moves up, the SVG path is deformed.

We hope to share with you a simple variant page transition effect. This idea is to transform an SVG path and move an introduction page to create an interesting and smooth appearance. For animations, we use anime. js and character effects, and Charming. In the demonstration, we use "" to demonstrate the effect, but of course this is only one of the many examples of this page conversion.

Online Demo

Source code download