Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll and on mouse move.
Best jQuery Animation Plugins & Tutorials with Demo
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.In the following tutorial we’ll take a look at how to create a magnetic noisy circle cursor for navigation elements. We’ll be using Paper.js with Simplex Noise.
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.
This tutorial is going to demonstrate how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using shaders and an off-screen texture.
Lookforward is a small library that helps you to create smooth transitions between pages with the easiest way using HistoryAPI.
A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations.
These lines shaped as ribbons have a really interesting graphic style. They also have less vertices than a TubeGeometry usually used to create thick lines.
Today we are going to explore a playful animated landscape with a psychedelic look. The idea is to show how an experimentation on art and design with a generative process can lead to interesting interactive visuals which can be used in a variety of mediums like web, print, illustration, VJing, installations, games and many others. We made 3 variants of the landscape to show you how small changes in parameters can change a lot in visuals.
The demos are made with three.js and the animations and colors are controlled in a custom GLSL shader. For the letter animations we are using 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.