CND link

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js>" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Test GSAP Working

• Example Code

gsap.to() —> Initial to Final State

Syntax:

gsap.to(target, { duration: value, properties });

Common Properties

• x, y, z: Position in pixels along the respective axes.
• rotation: Rotation in degrees.
• scale: Scaling factor (1 is the original size).
• opacity: Opacity from 0 (completely transparent) to 1 (completely opaque).
• backgroundColor: Background color of an element.

Basic Animation

Move an element to the right by 200 pixels over 2 seconds.

gsap.to(".box", { duration: 2, x: 200 });

Using Easing

Power0 (Linear): ease: "power0" or ease: "linear"