DEV Community

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

Posted on

1

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

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️