Chapter 250: useGsapTimeline()

Core Idea

_Part of the @remotion/gsap package.

Key Concepts

• Example
• API
• build
• timeline
• scope
• selector
• options?
• dependencies?

Code Examples

export const MyComposition: React.FC = () => {
  const scope = useGsapTimeline<HTMLDivElement>(({timeline, selector}) => {
    timeline
      .from(selector('[data-title]'), {
        y: 40,
        opacity: 0,
        duration: 0.8,
        ease: 'power3.out',
      })
      .to(selector('[data-badge]'), {
        rotation: 360,
        duration: 2,
        ease: 'none',
      });
  });

  return (
    <AbsoluteFill ref={scope} style={{background: '#000', color: '#fff'}}>
      <h1 data-title>Hello GSAP</h1>
      <div data-badge style={{width: 60, height: 60, background: '#B8FF5A'}} />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for useGsapTimeline() from the official docs.

Key Takeaways

1. Understand example when working with useGsapTimeline().
2. Understand api when working with useGsapTimeline().
3. Understand build when working with useGsapTimeline().
4. Understand timeline when working with useGsapTimeline().
5. Understand scope when working with useGsapTimeline().

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• Html in Canvas: related page in the Framework & Renderer Integrations section.