Archive for the ‘Playground’ Category

Scrolling Letters Animation

Posted on: No Comments
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome e...

Scrolling Letters Animation

Posted on: No Comments
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome e...

Slice Revealer

Today we’d like to share a simple reveal animation with you that is mainly inspired by Zhenya Rynzhuk’s transition experiments and Gil Huybrecht’s “Boardathon” Dribbble shot. The idea is to cover and uncover an image wit...

Outdoors Template

Today we’re very excited to share an experimental implementation of one of Gil Huybrecht’s designs with you. Gil creates fantastic signature designs with amazing animations and he kindly permitted us code up one of his works. The desig...

Gradient Topography Animation

Today we’d like to share a shape layer animation with you. The inspiration for this effect comes from the fantastic work by Diana Hlevnjak (Polar Vector) “Gradient Topography”. We use anime.js for the animations and Charming for the l...

Decorative Letter Animations

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations usi...

3D Particle Explorations

Posted on: No Comments
This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes. The Concept Making animations ...

Creative SVG Strokes Animation

Posted on: No Comments
SVG stroke animations are nothing new, but when using a more complex drawing that is basically made of strokes, then we can create a very original looking effect. Using many different colors and adding some other element animations, we can bring a very...

Decorative WebGL Backgrounds

Posted on: No Comments
Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the ...

Animated SVG Frame Slideshow

Posted on: No Comments
Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. The inspira...