Set a trigger position for scroll animations
January 23, 2025
Enhancement
Pro editor

Set a trigger position for scroll animations

There are many dimensions to animations: type of motion, direction, path, duration, and so on... This week, we've released an improvement that provides more control over animations triggered by the viewport (a.k.a. "scroll animations").

Selecting a starting threshold in the viewport

A scroll animation in Maglr lets you choose at what percentage relative to the screen your animation should trigger. In the editor, this is visualised by a line marking the point of triggering--the "threshold". That means that setting the starting position to 50%, the animation will trigger in the middle of your viewport.

A screenshot of the Pro editor with keyframe animation

The problem

Alongside the height of the viewport, there's the animated element itself to consider. By default, it was the top part of your element that would need to touch the set threshold in order for animations to start. In other words: as soon as the top-left corner of your element touches the 50% mark, your element will animate. This poses several problems:

  • The element is not exactly in the middle of the page when animated
  • In case of elements (or groups) with large heights, the animation would be triggered before the whole element is in view
A screenshot of the UI

The solution

We have added the option to choose the "trigger-point" on your element. That means you can choose 'center' and 'bottom' as the trigger position upon crossing the set viewport threshold. That way, you can trigger animations exactly in the center of the viewport and the element, creating a much smoother reading experience.

See it in action

Open the demo page to see the fish triggered at the specified trigger points.
View demo page