DEV Community

Cover image for Make Voxel Chicky Bounce Call To Action
Takane Ichinose
Takane Ichinose

Posted on

Make Voxel Chicky Bounce Call To Action

Make Voxel Chicky Bounce Call To Action

Description

A call-to-action microinteraction, and animation of bouncing voxel model using GSAP and ThreeJS.

This layout is designed for full-page view of mobile devices. Though it will also look good on computer devices I believe.

I tried to make the squishing animation by playing on the GSAP timeline.

I created the Voxel model months ago using MagicaVoxel. The reference I used for this is also a 3D model (Using HTML and CSS) I created years ago.

See Chick in 3D Pixel World (No Javascript)

Resources

JavaScript Library

GreenSock

ThreeJS

Modelling Tool

MagicaVoxel

Fonts

Luckiest Guy

Rubik

Discussion (0)