Blog | Page 16 of 63

CSS technique for elastic moving active background for navigations

Here is a simple CSS solution (javascript not needed here) to achieve the active state elastic animations that go from left to right during the active state of a particular nav tab. Let “.bg-elastic” is the free-moving active state element inside the nav...

GLB/GLTF Model Editor / Viewer

Dev Tools

Here are some links to cool tools on the web to view and edit GLB files. GLB file is a binary file that has all 3D models + animation data inside it. https://modelviewer.dev/editor/ https://threejs.org/editor/ You can also open .glb, .gltf files in free software...

Zoom everything on bigger screens – CSS Media queries

Code Snippets, CSS

Hi, if you want to zoom your website on a bigger screen like QHD and UHD i.e > 1920px you can just use the following media queries. You can edit them according to your needs. /* Zoom everything on bigger screens */ @media (min-width:2000px) and (max-width:2399px) {...

Royalty free stock images and more

Misc

Hi, will be listing royalty-free stock image websites here that I use daily for my work. https://pixabay.com/ https://www.freepik.com/

Allow numbers and new line in textarea using JavaScript

Misc

Textareas are commonly used in web forms to allow users to enter multi-line text input. By default, textareas allow users to enter any character they want, including letters, numbers, symbols, and line breaks. However, in some cases, you may want to restrict the input...

GSAP ScrollTrigger – Pin

GSAP

In this demo the block gets pinned to viewport on page scroll to bottom. Have a look at the code also. DEMO – open in a new tab HTML <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta...

ScrollTrigger – Timeline – GSAP

GSAP

Checkout the following demo for timeline that executes animation one after the another seamlessly. DEMO – open in a new tab HTML <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta...