GSAP Core Fundamentals Quiz Quiz

Challenge your understanding of key GSAP animation principles with this focused quiz designed to reinforce essential syntax, methods, and animation behaviors. Explore common use cases and best practices to build a strong foundation in GSAP’s core concepts.

1. GSAP Tween Syntax

   Which of the following correctly creates a basic animation that moves an element with the ID 'box' 100 pixels to the right over 2 seconds?

   1. gsap.to('#box', {x: 100, duration: 2})
   2. gsap.move('#box', {x: 100, time: 2})
   3. gsap.to('#box', x: 100, seconds: 2)
   4. gsap.animate('#box', {left: 100, duration: 2})

   Explanation: The correct answer uses the proper GSAP tween method, which is 'gsap.to', and specifies both the target and the required properties inside an object. The second option uses a method 'move', which does not exist in core GSAP. The third uses 'animate' and references 'left' instead of 'x', making it incorrect. The fourth option incorrectly places the properties outside of curly braces and uses 'seconds' instead of 'duration'.

2. Easing Usage

   When animating with GSAP, which property would you set to make the motion start slowly and finish quickly, such as simulating acceleration?

   1. smooth: true
   2. slow: 'end'
   3. ease: 'power2.in'
   4. timing: 'linear'

   Explanation: Setting 'ease' to 'power2.in' applied to an animation will create an accelerating effect, starting slow and speeding up toward the end. The 'timing' property does not exist in GSAP and 'linear' would create a constant speed. 'Smooth: true' and 'slow: end' are not valid GSAP properties for easing effects.

3. Stagger Animations

   If you want five items in a list to animate sequentially with a slight delay between each, which GSAP property should you use in your tween?

   1. stepDelay
   2. interval
   3. stagger
   4. delayEach

   Explanation: The 'stagger' property allows sequential animation with a delay between each element, making it ideal for animating lists or multiple items in succession. 'Interval', 'delayEach', and 'stepDelay' are not recognized core GSAP properties for this purpose. Only 'stagger' handles this scenario efficiently.

4. Reversing Animations

   Which method lets you play a GSAP animation backward from its current position in a timeline or tween?

   1. undo()
   2. flip()
   3. invert()
   4. reverse()

   Explanation: The 'reverse()' method is provided to play an animation backward from its current state, making it the proper function for this case. 'Invert()', 'undo()', and 'flip()' are not standard GSAP methods and would not achieve the intended behavior. Therefore, only 'reverse()' is correct.

5. Timeline Control

   What GSAP method should you use to add multiple tweens to a timeline so they play in a precise order?

   1. queue()
   2. insert()
   3. add()
   4. push()

   Explanation: The 'add()' method is used to insert tweens or callbacks into a timeline at specific points, ensuring controlled sequence and timing. 'Push()', 'insert()', and 'queue()' are not valid GSAP timeline methods, though their names may seem plausible. Only 'add()' guarantees correct timeline organization.