# Making elements revolve in Framer Source: https://www.youtube.com/watch?v=AmthSr3pGdE Recap page: https://rapidrecap.app/video/AmthSr3pGdE Generated: 2026-01-07T22:03:52.356+00:00 --- ## Quick Overview Framer motion effects like rotation can be achieved by wrapping multiple elements in a frame, applying a 'Loop' effect to that parent frame set to rotate 360 degrees, and then copying that effect onto the individual child elements while setting their rotation to -360 degrees to cancel out the parent's rotation, resulting in a stable arrangement of icons around a central point. **Key Points:** - The tutorial demonstrates creating a revolving motion for multiple elements (icons) arranged in a circle around a central point using Framer's Loop effect. - The core technique involves grouping all elements into a parent Frame (e.g., named 'Frame') and applying a 'Loop' effect set to rotate 360 degrees with a 30-second time duration for a slow, subtle revolution. - To keep the individual icons upright while the parent frame rotates, the effect must be copied from the parent frame to each child icon (using Command/Ctrl + Right Click > Copy Effect). - The copied Loop Effect on the child icons must then be modified to rotate -360 degrees, which cancels out the parent's 360-degree rotation, ensuring the icons maintain their orientation relative to the viewer. - The default Loop Effect time is too fast, so the instructor sets the parent frame's rotation time to 30 seconds for a "slow, subtle revolution" (1:38). - The instructor uses Command/Ctrl + P to preview the animation and Command/Ctrl + Return/Enter (or Command/Ctrl + P) to switch between the editor and preview mode (1:21, 1:46). ![Screenshot at 00:05: The initial visual setup shows eight distinct icons arranged in a circle around the central Framer logo, demonstrating the desired layout before any motion is applied.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-00-05.jpg) **Context:** Joseph Todaro, Education at Framer, provides a quick Framer tip demonstrating how to achieve a continuous, subtle rotation effect for a set of elements arranged radially around a central object (the Framer logo) without the individual elements themselves appearing rotated or upside down. ## Detailed Analysis The video details a technique in Framer to make elements revolve around a central point while maintaining their upright orientation, specifically using the Loop effect. First, the desired elements (eight icons in this case) are positioned optically in a circle around the Framer logo within a parent Frame. The presenter then applies a 'Loop' effect to this parent Frame, setting the rotation to 360 degrees over a slow duration of 30 seconds to achieve a subtle movement (1:05-1:38). The problem arises because rotating the parent frame causes the child elements to rotate along with it, making them appear skewed or upside down. To fix this, the presenter copies the Loop Effect from the parent frame (02:05) and pastes it onto every individual child icon (02:30). Crucially, on each individual icon's Loop Effect settings, the rotation value is inverted to -360 degrees. This negative rotation perfectly cancels out the positive 360-degree rotation inherited from the parent frame, resulting in the entire composition revolving smoothly while every icon remains perfectly upright (03:04). The instructor emphasizes that the default rotation duration is too fast, necessitating the 30-second setting for a more refined visual result. ### Framer Quick Tip - Creating Revolving Motion: The goal is to make elements rotate around a center point while staying upright - This is achieved using the Framer Loop Effect on a parent container. ### Step 1 - Setup and Parent Loop Effect: Arrange elements (icons) in a circle around the center point - Select the parent Frame and add a Loop effect set to 360 degrees rotation - Set the transition time to 30 seconds for subtlety (1:14). ### Step 2 - Correcting Child Element Rotation: Copy the Loop Effect from the parent Frame (Right Click > Copy) - Paste the effect onto every individual child element (Right Click > Paste Effect) (02:05-02:31). ### Step 3 - Canceling Parent Rotation: On the individual child elements' Loop Effect settings, change the rotation value from 360 to -360 degrees - This negative rotation cancels the parent's rotation, keeping icons upright (02:48-02:57). ### Preview and Final Result - Previewing the animation shows the icons revolving smoothly around the center without flipping or tilting (03:23). ![Screenshot at 00:00: Joseph Todaro introduces the Framer quick tip demonstration.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-00-00.jpg) ![Screenshot at 00:03: A quick demonstration of the desired effect: elements rotating around the Framer logo.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-00-03.jpg) ![Screenshot at 00:25: The Framer editor interface showing the group of icons positioned radially within a selected parent Frame.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-00-25.jpg) ![Screenshot at 01:05: The Loop Effect settings window being configured, showing the transition set to Linear and the Rotation set to 360 degrees.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-01-05.jpg) ![Screenshot at 02:48: The Loop Effect panel on an individual icon, showing the crucial step of setting the rotation value to -360 degrees to counteract the parent frame's rotation.](https://ss.rapidrecap.app/screens/AmthSr3pGdE/00-02-48.jpg)