Spice up your site with cool animations using GSAP..pdf
0 likes19 views
led By Saeed Bawaney Get and overview and learn some animation skills using the GSAP javascript animation library.
![g s a p . t i m e l i n e ( ) . t o ( [ s e l e c t o r ] , [ v a r s ] , [ p o s i t i o n ] ) ;
The Position parameter
• Position values:
• Number = places tween at this many seconds from the beginning of timeline.
• Label = places tween at the beginning of the label ( { “SceneTwo”: 12 } ).
• “<“ = places tween at the beginning of the previous animation/tween.
• “>“ = places tween at the end of the previous animation/tween.
t l . t o ( “ . b o x ” , { x : 1 0 0 0 , d u r a t i o n : 1 } )
. t o ( “ . b o x ” , { y : 1 0 0 , d u r a t i o n : 1 } , “ 3 ” ) / / 3 s e c o n d s f r o m b e g i n n i n g o f t i m e l i n e .
. t o ( “ . b o x ” , { x : 0 , d u r a t i o n : 1 } , “ < 1 ” ) / / 1 s e c o n d a f t e r t h e s t a r t o f t h e p r e v i o u s t w e e n .
. t o ( “ . b o x ” , { y : 0 , d u r a t i o n : 1 } , “ > - . 3 ” ) ; / / . 3 s e c o n d s b e f o r e t h e e n d o f t h e p r e v i o u s t w e e n .
. t o ( “ . b o x ” , { y : 0 , d u r a t i o n : 1 } , “ s c e n e Tw o + = 2 ” ) ; / / 2 s e c o n d s a f t e r t h e s t a r t o f t h e “ s c e n e Tw o ” l a b e l .
GSAP Timeline](https://image.slidesharecdn.com/spiceupyoursitewithcoolanimationsusinggsap-250515223250-b72801de/85/Spice-up-your-site-with-cool-animations-using-GSAP-pdf-16-320.jpg)
Spice up your site with cool animations using GSAP..pdf
- 2. WELCOME Into the Box 2025: The Future is Dynamic!
- 3. GSAP – A wildly robust JavaScript animation library built for professionals Spice Up Your Site With Cool Animations Using GSAP
- 4. Saeed Bawaney • Born in Pakistan. Parents moved to the California Bay Area in the 70’s. Lived in Seattle for 25 years. Moved on Houston TX in 2013. Been married for 25 years with 3 kids. • I love playing guitar. Played in some bands and released some CDs. Completed in guitar competitions ( when that was a thing ). I also Love MMA. I used to be part of the media covering UFC events. Lately I joined F3, a free men’s workout based on Fitness, Fellowship, and Faith. • I’ve been working with CF for over 20 years and have left my “legacy” all over the place. I got introduced to ColdBox over 10 years ago and have been a student of modernization ever since. Independent Consultant [email protected] @shreddtech
- 5. What is GSAP • GSAP = GreenSock Animation Platform • Smooth, high-performance, flexible animations • Developed by Jack Doyle - Flash/AS in 2008 • GSAP 1.0 released for JavaScript in 2012 • GSAP 3.0 modernized API released in 2019 • Acquired by Webflow in 2024 • Actively maintained & improved • Free & Club GreenSock (paid) options • Trusted by major companies • Framework Agnostic
- 6. • npm npm install gsap • yarn yarn add gsap • CDN <script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> Installation
- 7. • GSAP • The main object with various methods and properties that create and control tweens and timelines. • Tween • Does all the animation work by transitioning values over time. • Timeline • A sequencing tool that acts as a container for tweens and other timelines. • Controls - pause(), restart(), reverse(). • Easing • Changes the timing and feel of tweens. Fundamentals
- 8. GSAP Tween • Animate any CSS-related property. • Can handle anything you throw at it. • “If in doubt - try it out!” • Non-animatable properties • These will be set at the beginning of the tween except for display: ‘none’, which will be set at the end. • Animatable properties are ones that have a numeric value representation.
- 9. GSAP Tween • Hyphenated CSS properties become camelCase properties. • “font-size” will be “fontSize”, “border-radius” becomes “borderRadius” • Transforms • Order of transforms 1. translation( x, y, z ) 2. scale 3. rotationX 4. rotationY 5. skew 6. rotation • GSAP’s built in aliases for transforms are more performant and cross browser friendly.
- 10. GSAP Tween GSAP’s main functions for tweens. **Event callbacks will go in the vars object. ( onComplete, onUpdate, onStart, onReverseComplete, onInterrupt, or onRepeat ).
- 11. GSAP Tween L e t ’s c o d e !
- 12. GSAP Tween The problem? • Working with Tweens alone will can be daunting task. • If a change is desired, delays would need to be adjusted for every tween manually. • What about when you need to pause, restart, or reverse the sequence? gsap.to( “.box”, { x : 1000, duration : 1 } ); gsap.to( “.box”, { y : 100, duration : 1, delay : 1 } ); gsap.to( “.box”, { x : 0, duration : 1, delay : 2 } ); gsap.to( “.box”, { y : 0, duration : 1, delay : 3 } );
- 13. v a r t l = g s a p . t i m e l i n e ( { r e p e a t : 1 , r e p e a t D e l a y : 1 } ) ; t l . t o ( “ . b o x ” , { x : 1 0 0 0 , d u r a t i o n : 1 } ) . t o ( “ . b o x ” , { y : 1 0 0 , d u r a t i o n : 1 } ) . t o ( “ . b o x ” , { x : 0 , d u r a t i o n : 1 } ) . t o ( “ . b o x ” , { y : 0 , d u r a t i o n : 1 } ) ; t l . p a u s e ( ) ; t l . r e s u m e ( ) ; t l . r e v e r s e ( ) ; t l . r e s t a r t ( ) ; GSAP Timeline Timelines - a sequencing tool. • Adding tweens to a timeline will allow them to play in order one after the other. • Access to pause(), resume(), restart(), and reverse() methods for the entire sequence.
- 14. GSAP Tween L e t ’s c o d e !
- 15. g s a p . t i m e l i n e ( ) . a d d L a b e l ( “ s c e n e I n t r o ” , 0 ) ; Labels Labels are great a way to mark important parts of your timeline sequence. v a r t l = g s a p . t i m e l i n e ( ) ; t l . a d d L a b e l ( “ s c e n e I n t r o ” , 0 ) ; t l . a d d L a b e l ( “ s c e n e O n e ” , 5 ) ; t l . a d d L a b e l ( “ s c e n e Tw o ” , 1 2 ) ; t l . a d d L a b e l ( “ s c e n e C r e d i t s ” , 1 8 ) ; c o n s o l e . l o g ( t l . l a b e l s . s c e n e Tw o ) / / 1 2 GSAP Timeline
- 16. g s a p . t i m e l i n e ( ) . t o ( [ s e l e c t o r ] , [ v a r s ] , [ p o s i t i o n ] ) ; The Position parameter • Position values: • Number = places tween at this many seconds from the beginning of timeline. • Label = places tween at the beginning of the label ( { “SceneTwo”: 12 } ). • “<“ = places tween at the beginning of the previous animation/tween. • “>“ = places tween at the end of the previous animation/tween. t l . t o ( “ . b o x ” , { x : 1 0 0 0 , d u r a t i o n : 1 } ) . t o ( “ . b o x ” , { y : 1 0 0 , d u r a t i o n : 1 } , “ 3 ” ) / / 3 s e c o n d s f r o m b e g i n n i n g o f t i m e l i n e . . t o ( “ . b o x ” , { x : 0 , d u r a t i o n : 1 } , “ < 1 ” ) / / 1 s e c o n d a f t e r t h e s t a r t o f t h e p r e v i o u s t w e e n . . t o ( “ . b o x ” , { y : 0 , d u r a t i o n : 1 } , “ > - . 3 ” ) ; / / . 3 s e c o n d s b e f o r e t h e e n d o f t h e p r e v i o u s t w e e n . . t o ( “ . b o x ” , { y : 0 , d u r a t i o n : 1 } , “ s c e n e Tw o + = 2 ” ) ; / / 2 s e c o n d s a f t e r t h e s t a r t o f t h e “ s c e n e Tw o ” l a b e l . GSAP Timeline
- 18. A plugin adds extra capabilities to GSAP’s core. This keeps GSAP’s core relatively small and lets you use them as you need them. Free Plugins: GSAP Plugins Draggable Easel Flip MotionPath Observer Pixi ScrollTo ScrollTrigger Text Club GSAP Plugins: DrawSVG Physics2D PhysicsProps ScrambleText GSDevTools Inertia MorphSVG MotionPathHelper ScrollSmoother SplitText
- 19. Thank You! The Future of Modern Development Starts Here, with you! 🚀