Best jQuery Animation Plugins & Tutorials with Demo

    Motion CSS : A library of CSS3 Animation

    Motion CSS : A library of CSS3 Animation

    Motion CSS is a library of animation for your web projects. It works very simply. All you need to do is connect the css file and use a specific class to an element that should be animated.

    Particle Effects for Buttons with Anime.js

    Particle Effects for Buttons with Anime.js

    Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.

    VHS : Post-future CSS animations

    VHS : Post-future CSS animations

    VHS is a Post-future css animations library.

    wickedCSS : A library for CSS3 Animations

    wickedCSS : A library for CSS3 Animations

    wickedCSS is a library for CSS3 Animations.The animations include regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren’t applicable in all situations. They can be fun to play with.

    Elastic Slider : Animated Slider with SVG clip-path

    Elastic Slider : Animated Slider with SVG clip-path

    Elastic Slider is an experimental slider using SVG clip-path feature and animations powered by Snap.svg.

    A-Frame : Web framework for building Virtual Reality Experiences

    A-Frame : Web framework for building Virtual Reality Experiences

    A-Frame is a web framework for building virtual reality experiences.Make WebVR with HTML and Entity-Component Works on Vive, Rift, Daydream, GearVR, desktop.A-Frame can be developed from a plain HTML file without having to install anything.

    Features: Hit the ground running with A-Frame’s built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!

    Elastic Range Input with SVG & Anime.js

    Elastic Range Input with SVG & Anime.js

    In this tutorial we will see how we can simulate the behavior of a range input, with an elegant component. Fancy component to simulate a range input, based on this dribbble shot by Stan Yakusevich.

    To code it, we will mainly use SVG to draw the paths, and anime.js to perform the animations.

    ReboundGen : Editable CSS3 Animations Library

    ReboundGen : Editable CSS3 Animations Library

    REBOUNDGEN calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook’s Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters.

    Splash Transition with CSS and SVG

    Splash Transition with CSS and SVG

    In this tutorial we’ll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.

    Animating Elements Along SVG Paths with JavaScript

    Animating Elements Along SVG Paths with JavaScript

    Path slider is a animating elements along SVG paths with javascript.