Interaction extension · Pro
Hold a hero while the next section slides over it, or pause a statement for a screen of scrolling. Sticky adds a GSAP pin to Elementor 4 containers, with start and end points you choose.
Need a plain sticky header or sidebar? Elementor 4's own Style › Position › Sticky is free and does that well.
The short answer
Sticky is an Animation Addons for Elementor extension that turns a Flexbox, Div Block or Grid into an Elementor sticky element using a GSAP pin. You set where the pin starts and ends, whether the next content waits, and which devices it runs on, from the "Sticky/Pin Element" panel section.
| Plan | Pro |
|---|---|
| Type | Interaction (scroll) |
| Works on | Elementor 4 Flexbox, Div Block and Grid only. To pin a heading, image or button, wrap it in a Div Block. |
| Main controls | Enable Sticky, Pin Start, Pin End, Pin Spacing, Pin Markers, Enable On Editor; advanced: Pin Trigger, Pin End Trigger, Pin, Toggle Class, Border, Background Color |
| Engine | GSAP; the runtime ships in Animation Addons Pro |
| Editor preview | Off by default. Enable On Editor runs the pin on the canvas and adds a Play button. |
| Limits | Containers only. Without an active Pro licence, settings save but nothing pins. Pin Markers applies to all devices. Elementor 4.0+. |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Sticky from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
Every demo pins the container itself, with Pin Trigger, Pin End Trigger and Pin left on Default. Full-screen panels use Min Height 100vh; a section that slides over a pinned one gets a solid background, Position Relative and Z-index 1 in Elementor's Style tab.
The Harbor & Pine photo hero stays put while the cabins section rises over it like a sheet of paper.
Three full-screen service panels, each sliding over the last.
A one-line promise fills the screen and holds for a screen of scrolling.
An order card locks in the centre of the screen for a moment, then carries on.
A full-screen clinic video panel holds on desktop; on phones it scrolls normally.
Each chapter's full-screen title image holds while the text slides over it.
Features
Every point below is a real control in the Sticky panel section or part of how it works. Nothing here needs custom code.
Pin Start takes a position pair: a point on your element, then a point on the screen. Top Top pins when the element's top reaches the screen's top; Center Center pins it mid-screen. Pick from 15 presets or type your own.
Pin End uses the same pairs. Bottom Top keeps a full-screen panel pinned for one screen of scrolling.
Pin Spacing True makes the next section wait until the pin ends. False lets it scroll straight over the pinned one, the cover effect in demos 1, 2 and 6.
Pin Markers draws the start and end lines on the page. Enable Sticky, Pin Start, Pin End and Pin Spacing each take a value per breakpoint, so a pin can run on desktop only.
Pin Trigger, Pin End Trigger and Pin switch from Default to Custom to name another element. The Style tab adds Toggle Class, Border and Background Color.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Get Animation Addons ProIn WordPress, open Animation Addon › Settings › Extensions and check that Sticky is on.
In Elementor 4, select the Flexbox, Div Block or Grid to pin. For a full-screen panel, set its Min Height to 100vh in the Style tab.
Open the Sticky/Pin Element section and turn on Enable Sticky.
Set Pin Start and Pin End, choose Pin Spacing, and turn on Pin Markers.
Turn on Enable On Editor, press Play and adjust until the markers sit where you want.
Switch Enable Sticky off on breakpoints that shouldn't pin, turn Pin Markers off, and publish.
Honest comparison
Elementor 4 ships a free Style › Position › Sticky option with a Top or Bottom offset and Z-index. It keeps an element on screen within its parent container: exactly right for sticky headers and sidebars. Animation Addons Sticky is for scroll moments, holding a whole section between two scroll points.
| Need | Elementor 4 Position: Sticky | Animation Addons Sticky |
|---|---|---|
| Plan | Free, in the Style tab | Animation Addons Pro |
| How long it stays | Until it reaches the edge of its parent container | Between the Pin Start and Pin End points you set |
| Where it starts | A Top or Bottom offset | Element-and-screen pairs (Top Top, Center Center, Top 80px…) |
| Make the next section wait | No setting | Pin Spacing True or False |
| See start and end on the page | No | Pin Markers |
| Engine | CSS position: sticky | GSAP |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Interactions add a "While scrolling" trigger but no pin, so Sticky complements them.
Who it's for
The people who get the most out of it, and what they use it for.
Building stacked panels and hero reveals for clients.
Holding a hero photo while content arrives.
Structuring long reads with chapter openers.
FAQ
For a sticky header or sidebar, use Elementor's free Style › Position › Sticky. To hold a section between two scroll points, select a Flexbox, Div Block or Grid, open the Sticky/Pin Element section, turn on Enable Sticky and set Pin Start and Pin End. Animation Addons Sticky is part of Animation Addons Pro.
CSS sticky keeps an element in view only until it reaches its parent's edge. A GSAP pin, which Animation Addons Sticky uses, holds the element between start and end scroll points you define and can make the page wait with Pin Spacing. Use CSS sticky for headers and sidebars, a pin for scroll moments.
Give the hero a Min Height of 100vh, enable Animation Addons Sticky on it, and set Pin Start to Top Top, Pin End to Bottom Top and Pin Spacing to False. The hero holds while the next section scrolls over it; give that section a solid background, Position Relative and Z-index 1 so it covers the hero.
Animation Addons Sticky appears only on Elementor 4 Flexbox, Div Block and Grid; wrap a single heading, image or button in a Div Block to pin it. It needs Elementor 4.0 or later and an active Animation Addons Pro licence. Without Pro, the settings save but nothing pins on the live page.
Yes, when you ask for it. Animation Addons Sticky does not run on the editor canvas by default, so editing stays calm. Turn on Enable On Editor to run the pin in the editor with a Play button, and Pin Markers to see the start and end lines while you adjust.
Yes. In Animation Addons Sticky, Enable Sticky is set per breakpoint, so you can pin on desktop and switch it off at tablet or mobile. Pin Start, Pin End and Pin Spacing also vary per breakpoint. Pin Markers is one setting for all devices, so turn it off before publishing.
Use one method per element. If a container already has Elementor's Position set to Sticky, reset it before enabling Animation Addons Sticky, so CSS sticky and the GSAP pin are not both holding it. A page can still use Elementor's sticky header and Animation Addons Sticky on other sections.
Animation Addons loads an effect's scripts on the pages that use it, and Pro adds Lazy Animation, Reduced Motion and a Performance Wizard. Animation Addons Sticky only changes where a section sits while scrolling; text and links stay in the HTML, so search engines read the page as before.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Sticky on the same page or template.
Move content sideways on scroll.
The free extension behind the clinic tour panel.
Depth for sections scrolling past a pin.
Smooth-scroll links between pinned chapters.
A ready-made stacking widget instead of hand-built panels.
For a sticky header, Elementor 4's free Position › Sticky works well; upgrade for pins with their own start and end.
