Animation Archives | Puneet Sharma – Freelance Web Developer

Animated Cart – with SVG

Here’s an animated cart SVG with meaningful micro-interactions — a wiggle on hover, items “dropping in” to the cart, and a bounce on the wheels:Here’s what’s animated, and why each choice is meaningful: Hover wiggle — the cart body rocks...

SVG Path Stroke Animation

SVG Animation

Here is a simple method to animate SVG path strokes <path id=”line1″ fill-rule=”evenodd” clip-rule=”evenodd” stroke=”#000000″ stroke-width=”2″ d=”M340.637 221.93H418.837V224.676H341.774L302.854...

Gradient loader animation with html and css only

Code Snippets, CSS, CSS Animations

Here is a very simple example with a demo and source code for making a cool loader animation with a gradient. See the Pen loading-animation-gradient by Puneet Sharma (@webdevpuneet) on CodePen.

Matrix rain drop 01 digit code

Code Snippets, CSS Animations, JavaScript

Here is a code with a demo for matrix raindrop-like animation from top to bottom with 0 and 1 as its digits. DEMO See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen. HTML <canvas class=”canvas”> Code // Initialising the canvas var canvas =...

Animating Blocks

CSS Animations, JavaScript

Here is a cool example of animating blocks with no adjacent blocks active. See the Pen Animating Blocks by Puneet Sharma (@webdevpuneet) on CodePen.

Tag: Animation

Animated Cart – with SVG

SVG Path Stroke Animation

Gradient loader animation with html and css only

Matrix rain drop 01 digit code

Animating Blocks