Category: GSAP

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

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

Scroll Rotation Animation – GSAP

GSAP

Here is a scroll rotation animation example using GSAP scroll trigger. See the Pen ScrollTrigger. by Puneet Sharma (@webdevpuneet) on CodePen.

MorphSVG PLugin – GSAP

GSAP, SVG Animation

See the Pen MorphSVG : Docs Basic Usage by Puneet Sharma (@webdevpuneet) on CodePen.

Physics2D Plugin – GSAP 3

GSAP

Example of GSAP’s physics 2d plugin. See the Pen Physics2D for GSAP 3 Demo (used in docs) by GSAP (@GreenSock) on CodePen.

Draw SVG – GSAP

GSAP, SVG Animation

Here is an example using GSAP’s Draw SVG plugin to draw an SVG path. See the Pen Draw SVG – GSAP by Puneet Sharma (@webdevpuneet) on CodePen.

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