> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/core-components/video-animation.md).

# Video Animation

To play a video when it enters the scroll port, you can insert an Animation Group and then insert Video Animation inside it. Upload a short video directly to Webstudio and select it in the Video instance inside Video Animation. The video will start playing according to the Animation Group settings once the video reaches a certain position in the scroll port.

{% hint style="info" %}
Video Animation is one component of the animation engine. See [Animations](/university/foundations/animations.md) for an overview.
{% endhint %}

{% hint style="info" %}
Just remember that you'll need to wrap the Video Animation component in an Animation Group to define and control the actual animation behavior. The Animation Group must be the **direct** **parent** of the Video Animation.
{% endhint %}

## Structure

Video Animation expects a Video component inside it. When you insert the Video Animation template, Webstudio creates this structure for you:

```html
<AnimationGroup>
  <VideoAnimation>
    <Video />
  </VideoAnimation>
</AnimationGroup>
```

Configure the video source on the Video child.

## Settings

### Timeline

When Timeline is enabled, the Video child receives timeline progress from the parent Animation Group. Use this when you want video playback to follow scroll/view progress. When Timeline is disabled, the Video child still receives visibility/progress state from the group.

## Usage notes

* Use short videos for scroll-linked playback.
* Videos with frequent keyframes seek more smoothly when playback follows scroll progress.
* A common setup is a view-based Animation Group with a `cover 0%` to `cover 100%` range so the video responds while the element covers the scrollport.
* Keep the Video Animation component as the direct child of Animation Group; put the actual Video component inside Video Animation.

## Related

* [Animation Group](/university/core-components/animation-group.md) – Required parent for video animation
* [Vimeo](/university/core-components/vimeo.md) – Embed Vimeo videos
* [YouTube](/university/core-components/youtube.md) – Embed YouTube videos


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/core-components/video-animation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.