GSAP starter JS for landing page

GSAP, Starter Templates

Here is the JS code for the starter JS for the landing page, it includes a header stick on scroll, replace image with SVG, fade-in animation, number animation, parallax animation functions, and much more. Vendors: libraries required <!– Bootstrap CSS...

Sticky Sidebar

JavaScript, UI Components

Javascript function to make the sidebar sticky to the bottom if the content length is more than the sidebar. Also, check the demo for the same. DEMO See the Pen Sticky Sidebar by Puneet Sharma (@webdevpuneet) on CodePen. JavaScript let vw =...

GSAP function that will delay fade in animation with the use of a class

GSAP

HTML <div class=”heroSec__img replaceWithSVG fade-in fade-in-delay-0.35″>Thill will get delayed for 0.35 seconds before fade in animation triggers</div> Function const initFadeInAnimation = () => { const fadeElements =...

Replace an SVG image by SVG code – Script

Code Snippets

Here is a script that will help you replace an image tag with an SVG extension image file with SVG code. This can be helpful when you don’t want too much SVG code inside your HTML file. (function () {...

How to count the number of characters in an input tag?

JavaScript, jQuery

To count the number of characters in an input tag, you can use JavaScript or jQuery to get the value of the input and then count the length of the value. We can use the length property to count the number of characters in the input text. Here are some examples: Using...