Blog

javascript detect whether mobile is in landscape or portrait mode

Both methods will detect changes in orientation. The first method is simpler but only works on mobile devices, while the second method is more universal and can work on desktops as well. Method 1: Using window.orientation function checkOrientation() { if...

Draw any SVG path from 0 to 100% – using GSAP

Misc

See the Pen Draw any SVG path from 0 to 100% by Puneet Sharma (@webdevpuneet) on CodePen. HTML <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width,...

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 =...

Responsive Screen Sizes [ ** ] [*] []

CSS

2k – 2560 x 1290 Full HD – 1920 x 930 Laptop – 1366 x 625 Mac Laptop – 1437 x 813 Mac Laptop – 1920 x 1200 Small Laptop – 1280 x 580 Chrome Example

Vertical section scroll and horizontal scroll snap and with anchor navigation – GSAP

GSAP

Here is a cool example with code and demo for vertical and horizontal pin scroll using GSAP and it’s scroll trigger and scroll to plugins. DEMO See the Pen Vertical section scroll and horizontal scroll snap and with anchor navigation – GSAP by Puneet...