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.

Impressive rocket animation created with GSAP

GSAP

Here is a very nice rocket animation that burst-ignites than gains momentum and finally slows down and stops ignition. See the Pen Rocket Animation with GSAP by Puneet Sharma (@webdevpuneet) on CodePen.