Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo

Grid Reveal Effects with Anime.js

Grid Reveal Effects with Anime.js

Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

CSSans Pro – The Colourful, Sassy, CSS Font

CSSans Pro - The Colourful, Sassy, CSS Font

CSSans Pro is a just-for-fun CSS project.

Layer Motion Slideshow with CSS Grid & TweenMax

Layer Motion Slideshow with CSS Grid & TweenMax

Today we’d like to share yet another CSS Grid-powered slideshow with you. The idea is to show and hide images with a reveal effect and add a parallax like effect to the main image and the title. For the title we’ve added two copied layers with an outline style which creates an interesting motion effect. For the animations we use TweenMax.

piCSSel-art : Create pixel art using only CSS

piCSSel-art : Create pixel art using only CSS

piCSSel-art is a drawing app to draw pixel art and get it in CSS. Yes, you heard it right, CSS. The app converts each pixel to corresponsing box-shadow CSS and generate HTML and CSS code which you can use to put that art on your page.

Motion Transition Effect CSS & TweenMax

Motion Transition Effect CSS & TweenMax

Today we’d like to share a little speedy motion effect with you. The idea is based on the Dribbble shot Ping Pong Slow Motion by Gal Shir where you can see a ping pong ball being shot from one racket to the other. The motion in the animation is enhanced by squeezing the ball and making some background stripes’ height pulsate. This is exactly what we want to do in a slideshow transition: we’ll squeeze the image and add some background effect. Additionally, we’ll make the letters of the title fly away consecutively.

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.

GrapesJS : Open-source Web Builder Framework

GrapesJS : Open-source Web Builder Framework

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.

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.

Fullscreen Hover Loop Effect with CSS & TweenMax

Fullscreen Hover Loop Effect with CSS & TweenMax

Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.