GSAP online editor

Write, Run & Share GSAP code online using OneCompiler's GSAP online editor for free. Choose 'GSAP' as the language and you'll start with a spinning box. The preview reloads as you type, so you can tweak an animation and see the result straight away.

About GSAP

GSAP (the GreenSock Animation Platform) is a JavaScript animation library. It can animate CSS properties, SVG, canvas objects and plain JavaScript values, and it smooths over browser differences. Timelines let you chain and overlap animations precisely, which is why it's widely used for landing pages, interactive stories and UI motion.

Syntax help

Setup

Load GSAP from a CDN before your script.

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

gsap.to()

Animates from the current state to the values you give. The first argument is a CSS selector, an element, or an array of them.

gsap.to('.box', { x: 200, rotation: 360, duration: 1 });

gsap.from() and gsap.fromTo()

from animates from the given values back to the current state. fromTo sets both ends.

gsap.from('.title', { opacity: 0, y: -40, duration: 0.8 });

gsap.fromTo('.bar', { width: 0 }, { width: '100%', duration: 1.5 });

Easing, repeat and yoyo

gsap.to('.ball', {
  y: 150,
  duration: 0.6,
  ease: 'bounce.out',
  repeat: -1,    // -1 repeats forever
  yoyo: true,    // play backwards on every other repeat
});

Stagger

Animate a group of elements one after another.

gsap.from('.item', { opacity: 0, y: 20, stagger: 0.1 });

Timelines

A timeline plays animations in sequence. The optional position parameter (like '-=0.3') overlaps them.

const tl = gsap.timeline();

tl.to('.box', { x: 200, duration: 1 })
  .to('.box', { rotation: 180, duration: 0.5 })
  .to('.box', { backgroundColor: '#ff6b6b', duration: 0.5 }, '-=0.3');

Controlling playback

Tweens and timelines can be paused, resumed, reversed or restarted.

const tween = gsap.to('.box', { x: 300, duration: 2, paused: true });

document.querySelector('#play').addEventListener('click', () => tween.play());
document.querySelector('#reverse').addEventListener('click', () => tween.reverse());