Loading... Loading...

Sleeping Cat

Project Time: Feb, 2018      Tech: After Effects, Lottie Web (Bodymovin), HTML+CSS, Javascript

It’s a toggle switch with three types of interactions.
The button is the red woolen yarn in front of the cat.

 I – Click on red button to trigger the animation

II – Adding the reverse animation when clicking the button on the right side

III – Drag Only Slider. Drag the red button left and right to trigger the animation.

Process

Photoshop > After Effects > Bodymovin > Html+CSS

photoshop
AE

< Home     |     More Interactive Coding Projects >