Good content sticks. Literally. That's why we've made some great enhancements to sticky positions in Pro. Elements can now be sticky both relative to the screen border and in 'free position'.

What is sticky behaviour anyway?

Never used sticky? No problem. The definition of stickiness is in the word: elements that are "sticky" wil remain in the same spot when scrolling. The scrolling part is important, otherwise we would never notice that an element is sticky. A good example of this behaviour is a navigation bar that remains at the top of your screen.

How sticky worked before in Maglr

Sticky positioning in the Pro editor has always worked in combination with a relative "anchor". Upon setting your element's position to sticky, you ought to pick a reference point which can be either of your four screen borders or the middle of the canvas. That way, the element would always remain in view for the duration of the scene.

However, if you wanted to have an element become sticky only for a small distance of the scene or page, there was no way of doing so. Your element was either sticky (always in view) or it wasn't. A workaround for this scenario was to use keyframe animations, though this wasn't an ideal solution as an animation is not the same as sticky positioning - although the result may look similar.

What's new (and why it's been improved)

Let's take a look at what's been changed.

Sticky is now an additional setting to either 'screen border' or 'free position'

Previously, you would find 'sticky' as a position within the positioning options dropdown menu. In that same menu, you'll find that it is now available as an additional setting to the other positions. That means that you're choosing either "free position" or "screen border" and can toggle the sticky option for either.

Here's how it works depending on your chosen position:

• Screen border: The option for 'screen border' positioning with sticky turned on, works exactly the way it used to with the old "sticky" option. You're choosing an anchor (border) and the element becomes sticky relative to that border. Easy.
• Free position: This position in combination with "sticky" is the new kid in town. Position your element on the canvas where you'd like it to be on-screen. Then choose the point where you'd like your element to stick to, being the top, center or bottom of the screen.

Set the "sticky distance" in pixels

As mentioned before, creating elements that would only be sticky for a small distance wasn't an option and often a keyframe animation would be used as a workaround. Fortunately with the 'free position' option in combination with sticky, you can position an element halfway through your scene and configure the distance (in pixels) that it needs to travel. You'll find a line is drawn on the canvas to visualise the distance. Additionally, you can add margin to add space between the element and the border of the screen (if you have opted for 'top' or 'bottom').

Other tips for sticky positioning in Maglr

• Be aware that an element cannot be made sticky if it is inside a group
• Not setting a distance means the element will be sticky throughout the whole scene
• Use rulers to find the exact point in the scene where you'd like your element to become or stop being sticky
• If other elements are overlapping your sticky element when scrolling, you can fix this by bringing sticky element up in your layer tree.

When to use sticky and when to use keyframe animations

Although they may look similar in result, sticky positioning and keyframe animations are different.

• A sticky element sticks to its position on the screen for a period of time.
• A keyframe animation is an animated element, meaning it moves and can move omnidirectional.

So when should you use one in favour of the other? Let's put it simply:

• Should the element remain in the same spot throughout the scene? Go for sticky.
• Does the element need to change direction or position (even slightly) upon scrolling? Go or a keyframe animation.

It's recommended to opt for sticky where you can, as keyframe animations may be heavier on performance and will slow down your pages.