Archive for the ‘Playground’ Category

Animated Image Pieces

After making the Developer/Designer Page Layout Concept we wanted to try out some different effects for the pieces animation on the image. There are quite a lot of possibilities to animate the fragments, so we made some demos showing the different effe...

CSS Grid Layout Slideshow

Today we’d like to share a little slideshow with you that is powered by CSS grids. The idea is to have several images shown in an artsy way and apply a different layout for each slide. We also play with a reveal effect where we show and hide the ...

Letter Effects and Interaction Ideas (Part 2)

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the ...

Organic Shape Animations with SVG clipPath

After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create some organic, flowy movements on hover. Doing so on an SVG clipPath allows us to use this effect on ...

Letter Effects and Interaction Ideas

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animat...

Playful Little Tooltip Ideas

Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fellas use SVG path morphing, others transforms and...

On-Scroll Morphing Background Shapes

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Jul...

Folder Preview Ideas

Today we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered f...

Infinite Tubes with Three.js

Posted on: No Comments
Since WebGL is getting more and more popular, we start to see a bunch of websites using it for amazing creative designs. The brand Fornasetti recently published their website using the power of WebGL for a very nice effect: an animation that let’...

WebGL Scroll Spiral

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims to be as light as possible on desktops or mobile dev...