Best jQuery Animation Plugins & Tutorials with Demo

    Image Reveal Hover Effects with CSS

    Image Reveal Hover Effects with CSS

    Today we’d like to share a set of link hover effects with you. The main idea is to reveal a thumbnail image with a special effect when hovering a link.The inspiration for this idea comes from the effect seen on Fuge’s website where you can see a thumbnail showing when hovering the underlined links.

    Page Flip Layout with CSS Grid & TweenMax

    Page Flip Layout with CSS Grid & TweenMax

    Today we’d like to share a flat take on a magazine-like layout with a “page flip” animation. When navigating, the content gets covered and then the next “pages” show. Depending on how far the pages are apart (when choosing a page from the menu), we show multiple elements to cover the content, creating a flat page flip look. The layout is powered by CSS Grid.

    Lengthy : MicroLibrary for SVG Shape Length in a CSS Var

    Lengthy : MicroLibrary for SVG Shape Length in a CSS Var

    Lengthy is a JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations.

    Carousel with Image Zoom Effect

    Carousel with Image Zoom Effect

    A dead simple Javascript carousel script for cycling through a group of items ( images and content ) with a dot indicator and the arrows.Our “carousel with image zoom effect” comes with simple zoom-in effect for the images, one simple effect for the headlines and clear design which follows all that cool effects. This carousel was built with anime.js.

    Animated Grid Previews with CSS & TweenMax

    Animated Grid Previews with CSS & TweenMax

    Today we’d like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered images in the background that have a slight parallax effect. Once the “explore” link is clicked, the seemingly randomly placed items animate to their final position in a grid. Each grid has its own unique layout. Once the animation is done, the whole thing becomes scrollable and a content area shows beneath the grid.The animations are powered by TweenMax.

    Splitting.js : JavaScript library to Split an element by Words & Characters

    Splitting.js : JavaScript library to Split an element by Words & Characters

    Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

    Most Splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

    Grid Layout with Scrollable Content View

    Grid Layout with Scrollable Content View

    Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

    SpriteJS : A lightweight 2D Render Object Model

    SpriteJS : A lightweight 2D Render Object Model

    SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.

    SpriteJS can be used with D3.js, Proton and Matter-js.

    Features:

    • Manipulate the sprites element as you do with the DOM elements.
    • Perform fast drawing with smart cache.
    • Multiple layers.
    • Web Animations Api
    • Controllable event dispatching.
    • Object Oriented Programmed Development with ES6+
    • Server-side render. Work with node-canvas.
    • Weixin Apps

    Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

    Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

    Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.

    I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.

    I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.