Making elements revolve in Framer

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).

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.