Jack Doyle's GreenSock Animation Platform (GSAP) originally revolutionized Flash performance with `TweenLite` and `TweenMax`. Today, GSAP 3 stands as the premier standard for high-performance JavaScript animation, retaining its signature timeline chaining and easing mathematics while optimizing for modern DOM and Canvas pipelines.
1. Syntax Transition: AS3 TweenMax to Modern GSAP 3
| Animation Concept | ActionScript 3.0 (TweenMax) | Modern JavaScript (GSAP 3) |
|---|---|---|
| Basic Tween | TweenMax.to(mc, 1.5, { x: 200, alpha: 0.5, ease: Elastic.easeOut }); | gsap.to('.element', { duration: 1.5, x: 200, opacity: 0.5, ease: 'elastic.out' }); |
| Timeline Chaining | var tl:TimelineMax = new TimelineMax({ repeat: -1 }); | const tl = gsap.timeline({ repeat: -1 }); |
| Staggered Elements | TweenMax.allTo([mc1, mc2, mc3], 1, { y: 100 }, 0.1); | gsap.to('.items', { duration: 1, y: 100, stagger: 0.1 }); |
| Ticker Synchronization | TweenLite.ticker.addEventListener(Event.TICK, loop); | gsap.ticker.add(customRenderLoop); |
