Best jQuery Animation Plugins & Tutorials with Demo

    SVG Overlay and Infinite Menu Background Animation

    SVG Overlay and Infinite Menu Background Animation

    A little menu effect with composed of two things which is an SVG path overlay animation when it opens (or closes) and an infinite CSS powered background animation of an image grid.

    Horizontal Smooth Scroll Layouts

    Horizontal Smooth Scroll Layouts

    Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

    The main concept behind these layouts is to play around with animations that feel and work well for scrolling to the sides. This includes animating images and text depending on the direction we scroll. Moving things up and down for example or skewing them can create a really interesting dynamic effect.

    WebGL Video Transitions with Curtains.js

    WebGL Video Transitions with Curtains.js

    Some experimental video transitions using Curtains.js and shaders.We’ve done some crazy polygon transitions, and before that some WebGL Image Transitions. But a lot of people have been asking how to translate those techniques into the video world. And I agree, one cannot underestimate the importance of video on the web.

    Scroll Animations for Image Grids

    Scroll Animations for Image Grids

    Some ideas for scroll animations for image grids powered by Locomotive Scroll.

    Menu to Inner Page Animation with Image Grid Background

    Menu to Inner Page Animation with Image Grid Background

    A layout with a menu and background image grid that animates to an inner content page. The idea is to show a menu with a nice background grid of images and when choosing to explore a project, an animation happens where the images of the background grid fly away and an inner page shows.

    Creating a Menu Image Animation on Hover

    Creating a Menu Image Animation on Hover

    A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.

    Making Stagger Reveal Animations for Text with GSAP & Splitting.js

    Making Stagger Reveal Animations for Text with GSAP & Splitting.js

    A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.

    CindyJS : A Framework for Interactive Mathematical Content

    CindyJS : A Framework for Interactive Mathematical Content

    CindyJS is a framework to create interactive (mathematical) content for the web.It aims to be compatible with Cinderella, providing an interpreter for the scripting language CindyScript as well as a set of geometric operations which can be used to describe constructions. Together, these components make it very easy to visualize various concepts, from geometry in particular and mathematics in general, but also from various other fields.

    Rough Notation : JavaScript library to Create and Animate Annotations

    Rough Notation : JavaScript library to Create and Animate Annotations

    A small JavaScript library to create and animate annotations on a web page

    Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

    CSS-Only Marquee Effect

    CSS-Only Marquee Effect

    A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot.It has a really nice marquee animation when hovering a menu item (you have to wait a couple of seconds to see the menu).