Program Ape Essential 10 Web front-end animation plug-in one

1. Animated SVG frame slideshow

Displays experimental slides of animated SVG frames when switching between slides. Different shapes can be used to create a variety of styles.

We would like to share an experimental slideshow with you. Our idea is to animate the SVG frames when transitioning from one slide to another. Using different shapes, we can create various frame styles when changing the SVG path. The idea was inspired by dribbble shooting: 06 chapters too mediocre. We are using the Anime.js animation.

Online Demo

SOURCE download

2.WebGL background Decoration

A collection of decorative shapes that are displayed as backgrounds using WebGL. These shapes are created by three.js and animated using the Tweenmax library.

, we'll explore some of the 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 of the demos are created with the Three.js WebGL Library, and the animations are controlled by the high-performance Gsap animation library.

Online Demo

SOURCE download

3. Creative SVG Stroke animation

A creative touch animated by SVG and GSAP-driven bike illustrations.

SVG stroke animations are not new, but we can create a very primitive effect when using more complex paintings that are basically composed of strokes. Using many different colors and adding some other elements to the animation, we can bring a very unique look to the illustrations of life.

Online Demo

SOURCE download

4. Expand the mesh item animation

A grid item animation that enlarges the thumbnail when the detail view is open.

We would like to share a simple implementation of your grid animation is based on Dribbble's shooting surf project by Philip Slová?ek. When you click a grid item, the background and thumbnail are zoomed in and moved to its full-screen position. Although the dribbble lens is a mobile phone animation, we think we can also explore this concept on the desktop.

Online Demo

SOURCE download

5.Kylo Ren CSS Page preloader

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

, we're going to share something that's a little different from you: An animated "Star Wars" without an image that only sponsors Kyl?? O Ren is made with HTML and CSS.

Online Demo

SOURCE download

6. Dynamic shape overlay with SVG

Some ideas are superimposed on multi-layered SVG shapes, dynamically generating properties that can be adjusted with various effects.

We want to share another way of transforming page transformations. This time, we will be using JavaScript to generate multiple SVG curves, making it possible to make many different appearance shapes. By controlling the individual coordinates of several SVG paths, the shape of the curve is generated using a viscous motion rectangle (overlay). We use some good easing functions in glsl-easings, we can produce many interesting effects by adjusting the curve, velocity and delay values.

Online Demo

SOURCE download

7. Liquid deformation effect

A slide show of the liquid crystal distortion effect in WebGL driven by Pixijs and Gsap.

We would like to share with you an interesting distortion effect. The main concept of this demo is to use a displacement map to distort the underlying image and give it different types of effects. To demonstrate the liquid transition between images, we created a slide show. A displacement map usually does this by using an image as a texture and later applying it to an object, giving the assumption that the underlying object is wrapped around the texture. This is a technique that is often used in many different areas, but we will explore how to apply it to simple image slideshows. We will use Pixijs as our renderer, filter engine and GSAP animation.

Online Demo

SOURCE download

8. Slicing dual image layouts

Some layouts have a slice background image, slide function and glitch effect.

We want to share some pictures with you. The idea is to display some text elements in the grid layout and change the content and images as a slideshow. For the background image, we created a plugin with some extra options. To make an interesting transition, we use a glitch effect. This effect we also apply to some words.

Online Demo

SOURCE download

9. Organic SVG shape distortion idea

The idea of a small group of organic shape effects. The demo shows some ways to use animated SVG transformations interactively on your site, including menu hover and content display effects.

We want to share more animated organic SVG shapes with you. The idea is to integrate some smooth, natural shapes into a Web page as a decorative element, sometimes with an interaction, that is, a menu background hovering over a menu item, or simply a design of a continuous animated wave background, inspired by Kevin. In one of the demos, we also used some patterns and clipping paths to get full-screen animations to show other content. The Morph paths and other animations in these demos are supported by Anime.js.

Online Demo

SOURCE download

10. Transform Page transformation

A simple Morph page transform effect that distorts the SVG path when the current page moves up.

We want to share with you a simple variation of the page transition effect. The idea is to deform an SVG path while moving an introductory page to create an interesting, fluid look. For animations we use anime.js and some letter effects, we use charming. In the demo, we use "Introduction transforms" to show the effect, but this is certainly one of the many use cases for this kind of page conversion.

Online Demo

SOURCE download

Program Ape Essential 10 Web front-end animation plug-in one