Smooth Starts: An Easy Quiz on Framer Motion Basics Quiz

1. Purpose and Basics

   In a beginner React project, what is Framer Motion primarily used for when building a user interface?

   1. Creating declarative animations and interactive gestures in React components
   2. Handling global state across Redux stores
   3. Building server-rendered HTML on the backend
   4. Compiling TypeScript to JavaScript
   5. Querying a NoSQL database

2. Motion Component Choice

   If you want a block-level container to be animatable, which component would you render to replace a regular div?

   1. motion.div
   2. motion.span
   3. AnimatedDiv
   4. Trans.Div
   5. motionView

3. Start vs End Props

   When animating a card from off-screen to visible, which pair of props defines the starting and ending animation states?

   1. initial and animate
   2. from and to
   3. enter and leave
   4. start and finish
   5. intial and animate

4. Exit Animations on Unmount

   To animate a list item as it leaves the React tree (for example, when it is removed from a list), what do you need to use along with an exit prop on the item?

   1. Wrap the conditionally rendered component with AnimatePresence and define an exit prop on it
   2. Use Suspense with a fallback that plays the exit animation
   3. Call useEffect to start a CSS transition on unmount
   4. Add a leaveStyle prop to the component
   5. Enable autoExit on the parent container

5. Spring vs Tween

   If you want a box to bounce naturally into place, which transition choice is most appropriate for that effect?

   1. Use a spring transition (type: 'spring') to create a bouncy movement
   2. Use a tween transition with linear easing for extra bounce
   3. Use type: 'keyframe' to simulate physics
   4. Set easing: 'bezier(0,0,0,0)' to enable physics
   5. Apply type: 'sprint' for fast spring animation

6. Drag Interactions

   If a card should be draggable only along the horizontal axis, which prop would you add to the component?

   1. drag='x'
   2. draggable
   3. pan
   4. dragEnabled
   5. dragAxis='horizontal'

7. Variants for Reuse

   When multiple buttons need to share named animation states like 'hidden' and 'visible', what feature should you use to define and reuse those states?

   1. Define variants on the parent and reference them on children via the variants prop
   2. Use a presets prop that broadcasts states to all children
   3. Provide themes to switch between animation states
   4. Use a varients prop on each child to avoid duplication
   5. Attach a states prop with named animations

8. Hover Gestures

   If a button should slightly scale up while the user hovers over it, which prop would you add to the button?

   1. whileHover={{ scale: 1.1 }}
   2. onHover={{ scale: 1.1 }}
   3. hover={{ scale: 1.1 }}
   4. whileTap={{ scale: 1.1 }}
   5. whenHover={{ scale: 1.1 }}

9. Layout Animations

   When grid items change size and position after a filter is applied, which prop enables smooth automatic layout transitions for those changes?

   1. Add the layout prop to the items so position and size changes animate
   2. Add autoLayout to each item to animate rearrangements
   3. Set layoutMode='smart' on the container to handle reflow
   4. Enable flexAnimate on the parent grid to animate flex updates
   5. Set resizeAnimation on each child to track bounds changes

10. Keyframes Syntax

    To move a box from x = 0 to 100 and back to 0 using keyframes in a single animation, which animate syntax is correct?

    1. animate={{ x: [0, 100, 0] }}
    2. animate={{ x: '0-u003E100-u003E0' }}
    3. keyframes={{ x: [0, 100, 0] }}
    4. useKeyframes([0, 100, 0])
    5. frames={{ x: [0, 100, 0] }}