GSAP Extensions Pin elements Estimated reading: 6 minutes 67 views Pin Elements lets you keep a specific element fixed in place while scrolling, helping you create focused and interactive sections on your website. It’s a useful feature for things like sticky content, scroll animations, or highlighting key areas as visitors move through the page. It adds more control to your layouts and makes your designs feel more dynamic and engaging. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Pin Elements Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Under Scroll Smoother, toggle on Pin Elements. Step 1: Choose Your Target Element & Enable the Wrapper Select the element you want to apply Pin Elements to, then click on the container to enable the wrapper. Next, click on ‘Pin Elements’ and toggle the ‘Enable’ switch to ‘Yes’. The Pin Element is now enabled. You’ll find the option available in the page builder. Enable Pin Element The first thing you’ll see is the ‘Enable’ option. Turn this on if you want to see how your animation looks while you’re building your page. If it’s set to “Yes,” the animation will play in the editor just like it does on your actual website. If it’s set to “Off,” the element won’t move in the editor, but it will still work on the live site. In short, this setting lets you watch the animation as you design, so it’s easier to make changes. Step 2: Set the Pin Wrapper Customize how your element stays pinned during scroll by adjusting key settings like Pin Type, Scrub, Spacing, and more. Pin Wrapper The Pin Wrapper controls how your element stays in place while scrolling. You can choose Default for a quick setup or Custom for full control over wrapper placement. Default: Automatically adds a wrapper around the pinned element to maintain layout and handle pinning behavior—no extra setup needed. Custom: Lets you select your own wrapper, giving you complete control over where and how the element is pinned during scroll. For example, I chose Default, but you can select whichever option suits your needs. End Trigger The End Trigger sets the point where the pinned element stops staying fixed and starts scrolling like normal. You can change it to any value you like, such as a custom class, but by default, it is set to end_trigger, and I usually leave it that way. Pin The Pin setting offers three options: True, False, and Custom. True: Keeps the element fixed in the viewport while the page scrolls. False: Allows the element to scroll normally with the page. Custom: Defines specific scroll behavior, such as custom start/end positions, durations, or advanced triggers. For example, I selected True, but you can choose based on your preference. Pin Spacing The Pin Spacing setting offers three options: True, False, and Custom. True: Adds spacing below the pinned element equal to its height. False: No space will be added for the pinned element. Custom: Manually define how much space should be added where the element originally was. For example, I selected False, but you can choose whichever option you prefer. Pin Type The Pin Type has two options: Fixed and Transform. Fixed: The element stays visible and fixed in place while scrolling. Transform: The element appears pinned but moves smoothly using transform values as you scroll. I selected Transform, but you can choose whichever suits your preference. Pin Scrub The Pin Scrub setting offers three options: True, False, and a Number. True: Links the animation timeline directly to the scroll progress for precise synchronization. False: Plays the animation independently of the scroll, without syncing to the scroll position. Number: Syncs animation to scroll with a smoothing delay equal to the number of seconds you specify. For example, I selected False, but you can pick what works best for you. Pin Markers Pin Markers has two options: True and False. True: Displays colored markers on the page to indicate the start and end of pinned elements visually. False: Hides the markers from view. For example, I chose False, but feel free to explore and select what works best for you. Step 3: Set the Pin Trigger Points Choose where the pinning starts and ends by aligning your element with the viewport, such as when its top hits the viewport’s top. You can also set a custom position. Use Breakpoint to decide which devices the pinning works on, ensuring your animation fits all screen sizes. Start The Start setting offers options like:Top Top, Top Center, Top Bottom, Center Top, Center Center, Center Bottom, Bottom Top, Bottom Center, Bottom Bottom, and Custom. Each option matches a part of the element (Top, Center, Bottom) with a part of the screen (Top, Center, Bottom) or uses a custom position. For example, I selected Top Top, so pinning starts when the top of the element reaches the top of the viewport. End The End setting offers similar options to Start. For example, I selected Bottom Top, so the pin stops when the bottom of the element reaches the top of the viewport. BreakPoint The Breakpoint setting offers three options: None: Disables the pinning effect on all screen sizes. Mobile Portrait: Enables the effect on screens up to 767px wide. Tablet Portrait: Enables it on screens between 768px and 1024px wide. For example, I chose Mobile Portrait, but you can pick what fits your needs. Final Results You Did It You’ve successfully activated and set up the Pin Elements extension! From turning on the wrapper to adjusting scroll behavior, pin type, spacing, and breakpoints, you now have full control over how your elements move during scroll. Whether you’re making storytelling sections, sticky headers, or interactive visuals, Pin Elements helps you build scroll-based effects that improve your website’s design. Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
