Motion Forge Core
The "brain" of the Motion Forge suite. This component intelligently and invisibly manages the loading of GSAP and its plugins, avoiding conflicts with Elements and offering you a powerful visual diagnostic tool.
1. Basic Configuration (Core & CDN)
Set up the main library and let the component integrate into the layout without leaving a trace.
Custom CDN
By default, the Core uses the official optimized version of GSAP (v3.15). You can leave the field empty to use the standard one, or enter a custom URL if your project requires a specific version.
Zero Footprint Layout
The Core is a purely logical component. Thanks to the display: contents property, it is literally "invisible" to the browser's rendering engine.
2. Plugin Ecosystem
Activate superpowers for your animations, zero conflicts guaranteed.
Plugin Management
You have switches available to activate advanced extensions like ScrollTrigger (to animate on scroll), Draggable (for draggable elements), or Inertia (for realistic physical movements). Activate only what you need.
3. Debug Interface (HUD)
Monitor the health status of your GSAP environment in real-time directly on the page.
The Diagnostic Badge
By activating the "Debug Badge" option, a small floating panel will appear in the top left. A pulsing green dot indicates that GSAP is ready; a red one indicates connection problems.
4. Interactive Simulator
Change the settings below to experiment with how the Motion Forge "Brain" manages controls in real-time.
- ScrollTrigger
- Draggable
Motion Forge Director
The "Director" of your animations. An invisible logical node that imparts movement, appearance, and 3D effect instructions to any other element of your Elements page, activating them exactly when you decide.
1. Target & Scope
Define "who" should be animated. The Director works in the shadows, applying effects to the elements you specify.
Target Selector
Use standard CSS selectors to hook Elements items. Enter an ID (e.g. #hero-image) to animate a single element, or a class (e.g. .feature-card) to simultaneously animate multiple identical elements.
Scope: Children and Stagger
Instead of animating the main container, you can ask the Director to animate the Inner Children. This unlocks the Stagger effect: a cascading delay between the animation of one child and the next.
2. Visual Effects and Behavior
Choose how elements should enter or exit the scene, leveraging ready-to-use presets or full spatial controls.
Behavior: Entrance vs Exit
Choose whether the animation should make the element appear starting from an altered state (Entrance / From) or if it should move it away from its natural position to a new state (Exit / To).
Presets and Custom Control (3D)
Use quick presets like Slide, Zoom, or 3D Flip for instant results. If you need surgical precision, activate the Custom mode to freely mix X/Y movements, 3D rotations, and optical filters (Blur and Grayscale).
3. Scroll Triggers
Connect your animations to page scrolling by precisely defining when the action starts and when it ends.
Start Point and End Point
Define trigger points by crossing the Viewport lines (the user's screen) with the Trigger Element lines. You can even use a "Remote Trigger", making your Target's animation start when a completely different element enters the screen.
Scroll Triggers Simulator
Use the control panel on the left to understand how the guide lines behave. Blue lines control when the animation starts, red lines control when the animation ends or completes.
4. Pinning and Diagnostics
Advanced tools to pin elements to the screen and calibrate distances.
Enable Pin (Pin Element)
While the animation is running, you can "lock" the element on the screen, preventing it from scrolling with the rest of the page. Useful for creating fixed sections that change content on scroll.
Show Markers (Debug Labels)
By activating this option, GSAP will inject colored visual labels on the page (during Preview mode) showing the exact geometric position of Start and End. Essential for calibrating animations with pixel-perfect precision.
Motion Forge Draggable
Make your elements grabbable and draggable. An invisible logical component that applies physical rules, spatial limits, and elastic effects to any object on your Elements page.
1. Target & Movement
Choose what the user can drag and on which axes they can move it.
Target Selector
Use CSS selectors (e.g. #my-box or .image-card) to hook elements. The component works in the background, making the object instantly interactive.
Drag Type (Axis Type)
Decide the element's freedom of movement: anywhere (X and Y), horizontal only like a carousel (X), vertical only like a dropdown (Y), or like a knob (Rotation).
2. Limits and Obstacles (Bounds)
Prevent users from dragging elements off-screen or breaking the layout.
Bounds Container
By activating limits, you can designate a "fence" container (e.g. #game-area). The draggable element will hit the edges of this fence and won't be able to exit.
3. Inertia (Momentum)
Add physical realism: objects continue to slide after release.
Friction and Bounce
If activated (requires the plugin in the Core), the element won't stop abruptly as soon as the user releases the mouse, but will smoothly decelerate. You can control the friction (Throw Resistance) or allow a slight bounce on the edges (Overshoot).
4. Cursors and Advanced Levels
Customize the appearance of the mouse and element layering.
Hover and Dragging Cursor
Choose which cursor to show when the user hovers over the element and which to show while they are actually dragging it, such as the classic "hand", the crosshair, or the standard arrow.
Z-Index Boost and Clickables
The Z-Index Boost automatically brings the element you are dragging to the foreground, preventing it from temporarily falling behind other objects. Drag Clickables allows you to drag an element even if the user clicks exactly on top of a link or button located inside it.
5. Snap Back (Elastic Return)
Magically returns the element to its place when the interaction ends.
"Elastic" Effect
By activating Snap Back, as soon as the user stops dragging the object, it will return to its original position. You can customize the reaction time, animation duration, and braking type (Easing).
6. Interactive Physics Simulator
The options below follow the exact order in Elements. Try changing them and drag the target on the right.
Motion Forge Timeline
The main container for your animations. An invisible logical node that acts as a "stage", defining the trigger rules, scrolling, and pinning for all the keyframes you place inside it.
1. Configuration and Base Trigger
Name your sequence and decide which page element will act as the switch.
Trigger Selector
Enter the CSS selector (e.g., #hero-section or .text-block) of the element that, upon entering the screen, will trigger the animation. This element will become the reference point for the entire Timeline and all the Keyframes you insert into it.
2. Trigger Points (Scroll Triggers)
Connect the Timeline to page scrolling by precisely defining the start and end of the active area.
Start and End (Standard vs Custom)
Define the trigger points by crossing the Viewport lines (the user's screen) with those of the Trigger Element.
You can use standard placements (Top, Center, Bottom) or the Custom mode. With the Custom mode, you can artificially extend the animation duration by entering relative values, for example, setting the end to bottom+=1500px or +=200vh.
Trigger Points Simulator
Use the control panel on the left to understand how the guide lines behave. Blue lines control when the Timeline begins, red lines control when the animation completes.
3. Playback and Pinning (Advanced)
Choose how the Timeline should be played and pin elements to create complex navigation experiences.
Scrub vs Playback Mode
By activating Scrub, the animation is physically bound to the mouse wheel: it advances and rewinds based on how much the user scrolls the page.
If you leave Scrub disabled, the Playback Mode takes over, where you can decide if the animation should play only once upon entry, reset when it leaves the screen, or automatically reverse (Play & Reverse).
Pinning and Diagnostics
The Enable Pin option is extremely powerful: it allows you to pin an element to the screen, preventing it from scrolling with the rest of the page until the Timeline finishes playing. You can choose to pin the Trigger itself or specify a different element via "Pin Target".
Finally, by activating Show Markers, you make on-screen labels visible to fine-tune the Start and End points down to the millimeter during development.
Motion Forge Keyframe
The actors of your visual choreography. Each Keyframe component defines the movement, duration, effect, and temporal positioning of a single element or group of children, positioning itself within the parent Timeline.
1. Target & Setup
Tell the Keyframe which site element to move and how to interpret the scope.
Target
Enter the standard CSS selector to target the element you want to animate. You can target a unique ID (e.g., #main-hero-title) or a common class (e.g., .card-feature).
Scope and Child Selector
Decide the extent of the movement:
- Element: The effect is applied directly and solely to the Target block.
- Children: The Keyframe ignores the container and applies the animation to all its inner children in a cascade (Stagger).
By entering a class in Child Selector, you can filter the action to target only specific children while ignoring others (e.g., entering .icon inside a card).
2. Timeline Sequencing
Define the Keyframe's position on the time axis relative to other movements.
Timeline Position
Adjust the flow synchronization:
- After Previous (In Sequence): The Keyframe patiently waits for the animation of the Keyframe placed above it to completely finish before starting its own.
- With Previous (Synchronous): The Keyframe ignores the wait and overlaps, starting at the exact same instant as the previous Keyframe to move multiple objects together.
Automatic Sequencing Simulator
Change the insertion mode below to see how the Keyframes are arranged in the timeline track and how their execution changes on the top monitor as the playhead passes.
3. Visual Effect
Define the aesthetics, geometric, and spatial transformation of the movement.
Animation Behavior & Fade
Choose whether the Keyframe manages an entrance (Entrance / From), where the object emerges from the applied settings to settle into the layout, or an exit (Exit / To), where it moves away from its natural state.
The Fade In/Out switch allows you to add or remove opacity fading during the movement.
Movement Preset & Custom 3D Engine
Use ready-made Presets (Slide, Zoom, Blur In, Focus & Color) paired with a distance in pixels (Distance).
By selecting Custom, you unlock access to individual millimeter-precise axes: X/Y offsets, Scale, classic Z Rotation, and 3D Rotations on the X and Y axes with Origin calculation, capable of generating true perspective twists in the browser space, complemented by native blur and grayscale intensity filters.
4. Timing & Easing
Set the speed, initial pauses, and dynamic personality of the movement.
Duration, Delay, and Stagger
Configure the movement's duration (Duration) in seconds and an optional initial delay (Extra Delay) in milliseconds. If the scope is set to Children, the Stagger field will determine the incremental millisecond pause between the entry of one child and the next.
Ease Type and Ease Direction
The Ease Type dictates the physics of the animation: smooth decelerations (Power), accelerations that pull back before shooting forward (Back), rubbery bounces (Elastic), or structured physical drops (Bounce).
With Ease Direction you decide where to apply the curve (Out at the end, In at the beginning, In-Out on both sides).
