# Triggering video playback on scroll in Framer Source: https://www.youtube.com/watch?v=QXmPOjccivI Recap page: https://rapidrecap.app/video/QXmPOjccivI Generated: 2025-12-12T17:42:44.475+00:00 --- ## Quick Overview Framer enables triggering video playback based on scroll position by utilizing the "Scroll Variant" effect, which transitions between two component variants (e.g., 'Paused' and 'Playing') when the video element enters or exits the viewport, allowing for smooth, code-free video control synchronized with user scrolling. **Key Points:** - The technique involves adding a video component to a Framer design and setting its properties to be muted and looping disabled (01:03-01:04). - Two component variants must be created: one named 'Paused' where the video 'Playing' property is set to 'No', and one named 'Playing' where 'Playing' is set to 'Yes' (01:42-01:58). - A 'Scroll Variant' effect is added to the component, triggered by 'Layer in View' (02:26-02:29). - The scroll trigger transitions the component 'From' the 'Paused' variant 'To' the 'Playing' variant (03:01-03:04). - The 'Start' setting for the scroll trigger is set to the middle option, ensuring playback initiates when the component crosses the midpoint of the viewport (02:37-02:38). - Replay is set to 'No' so the video only plays once when entering the view, not continuously upon scrolling back up (03:11-03:14). - This setup ensures the video plays exactly when the user scrolls it into view, providing an intentional and polished visual effect as they scroll down the page (02:15-02:17, 03:31-03:34). ![Screenshot at 00:37: The initial setup phase showing the Framer editor interface where the user selects the 'Video' layer and uses the keyboard shortcut Shift+V to insert a video component onto the canvas.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-00-37.png) **Context:** This tutorial, presented by Justin Jones from Education at Framer, demonstrates how to achieve automatic video playback synchronized with user scrolling within the Framer design tool, aiming to create engaging, story-telling web experiences without writing custom code. The process relies on Framer's component variants and scroll effects capabilities. ## Detailed Analysis The video provides a step-by-step tutorial on implementing scroll-triggered video playback in Framer, making the video start precisely when it enters the user's viewport. The process begins by adding a video component to the design canvas (00:37-00:44). First, the video component's general properties are adjusted: it must be set to be muted ('Muted: Yes') and set not to loop ('Loop: No') (01:01-01:04). Next, the user converts the video element into a component and creates two variants: 'Paused' (where the 'Playing' property is set to 'No') and 'Playing' (where 'Playing' is set to 'Yes') (01:42-01:58). With the component variants set, the user returns to the main canvas element and adds a 'Scroll Variant' effect under the 'Effects' panel (02:22-02:25). The trigger is set to 'Layer in View' (02:28-02:29). The transition is configured to move 'From' the 'Paused' variant 'To' the 'Playing' variant (03:01-03:04). The 'Start' point for the trigger is set to the middle position, meaning playback starts when the element hits the center of the viewport (02:37-02:38). Finally, 'Replay' is set to 'No' so the video plays only once upon first view (03:11-03:15). This results in a smooth, intentional visual polish as the user scrolls down the page. ### Initial Setup - Adding and configuring the video component - Setting initial video properties: muted and not looping at 00:51-01:04 ### Creating Variants - Converting the video layer into a component and creating two states: 'Paused' (Playing: No) and 'Playing' (Playing: Yes) between 01:41-01:58 ### Applying Scroll Effect - Adding the 'Scroll Variant' effect to the component, selecting 'Layer in View' as the trigger, and setting the transition from 'Paused' to 'Playing' variants from 02:22-03:04 ### Trigger Configuration - Setting the scroll trigger start point to the middle of the viewport and disabling replay so the video only fires once upon entering view (02:36-03:15) ### Final Result and Preview - The effect is tested in preview mode, showing the video playing exactly when the user scrolls the component into the center of the viewport (03:16-03:24) ![Screenshot at 00:04: Demonstration of a web page structure, showing the Comet browser loading, setting the context for design work in Framer.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-00-04.png) ![Screenshot at 00:37: The Framer editor view showing the 'Layers' panel on the left and the canvas where the video component is being added via the 'Insert Video' option.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-00-37.png) ![Screenshot at 00:46: The right-hand properties panel open, showing the 'Video' settings where the URL source is selected and the 'Playing' property is toggled to 'Yes' for initial setup.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-00-46.png) ![Screenshot at 01:43: The component view in Framer, showing the 'Paused' variant selected and the layer settings open for modification.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-01-43.png) ![Screenshot at 02:23: The 'Effects' menu expanded on the right panel, highlighting the selection of 'Scroll Variant' to link scrolling behavior to state changes.](https://ss.rapidrecap.app/screens/QXmPOjccivI/00-02-23.png)