You now create beautiful interactive scroll pages yourself

You already have a lot of animation possibilities in Maglr Pro. From today, there are even more. We have expanded the Maglr Pro editor with various ‘scrolling animations’. Without typing a single line of code, you now build the most diverse vertically animated pages yourself.

Watch this complete demo to see all the new features in action

Demos
No time to read? Open the results directly:

• Scroll trigger animations
• Timed keyframe animations
• Parallax animations
• Sticky scroll animations
• Scroll path animations
• Everything combined in one demo

From fullscreen to longreads

The Pro editor was originally designed for fullscreen pages. With a fullscreen page elements are always located in the viewport. Based on duration & delay elements are building in the screen and are always visible.

Due to the increasing popularity of longreads, we faced a limitation in terms of animation possibilities. If you want to get animated images in the middle of your longread, then it may be that the animation is over before you have scrolled to that particular point.

Scroll animations

Scroll animations are not new, after viewing 10 different websites on the inspiration website Awwwards you come across all types of scroll animations. Beautiful subtle movements that slowly build up the story and giving extra attention to important subjects in the page. Parallax effects also stand out, a page suddenly gets depth during scrolling.

So this is what we needed in the Pro editor, but how? We should not forget that these example websites are all created by larger international teams, consisting of designers and multiple developers. With Maglr Pro we want to match the same end result, but from a single designer, without technical knowledge.

Working out the possibilities took some time …

Still easy to understand for the designer

Now there are sufficient standard ready-to-use animation solutions, but these soon proved to be too limited for what we had in mind. As a designer you would not have enough grip on how an animation builds itself up. So we were looking for more.

With Maglr Pro we focus on the professional designer. The designer who has great ideas, but doesn’t need to think about technology. The designer must be able to work directly in Maglr and turn his ideas into a visual interactive pages.

Simple in combinations with advanced featurues sometimes clashes. You want to offer a lot of options to make a nice interactive design, but on the other hand you do not want dozens of panels with settings that you don’t understand. So it had to be as visual as possible. As a designer you directly want to see what you are doing.

So we finally started developing the code ourselves. After a lot of trying, testing, developing, trying, removing, starting over and trying again, we think we have come up with something beautiful:

Setting up the scroll triggers, open demo

Determine where you start in & outgoing animations

Make use of all existing animations but decide when they should come into view during the scrolling. When adding the animation, you choose between an animation based on time or viewport position. A ‘viewport’ is the size of the window where the page is located. Now this window can have different sizes, depending on the type of device a visitor is using.

Therefore we started to uses percentages to point out where the animation should start. We clearly show an indication line on the specific location in the editor. When the element reaches that moment, the animation is started. The same applies for outgoing animations, even though this animation is reversed.

Creating a keyframe animation based on time, open the demo

Let animations run along a drawn path in time

Current animations consist of a start and end point. With the keyframe animations you are now able to draw more extensive animations that consist of multiple frames. When editing the animation, a new animation editor appears. Here you add multiple frames, determine the time between the frames and draw a path with curved lines which the element during the animation will follow.

Parallax effect added on multiple elements/layers, open demo

Create a sense of depth with parallax animations

When you scroll down a page all elements move with the same speed. With the parallax animation you determine whether an element should move faster or slower than the standard scroll. If you apply this to multiple layers that lie on top of each other, you will get a sense of depth. A really simple effect that opens up a whole set of new possibilities.

The menu in this screen is fixed while other layers animate through the page . Open demo

Fix elements with the sticky option

If you want to lock parts during scrolling, the sticky animation is a nice addition. Consider, for example, a menu that you always want to keep in view at the top of your page.

Creating custom scroll paths in the Maglr Pro editor, open end result

Draw vertical scroll paths with multiple keyframes

A part that we are still finishing; the vertical scroll path. Just like with the ‘keyframe animation’ mentioned above, you also draw a path with several different frames. The big difference is that this animation does not run on time, but responds to the scroll distance of the user.

You draw paths in all directions. By applying accelerations and delays between frames, your elements move faster or slower than the rest of the page. It is also possible to temporarily fix an element (sticky) while walking through a path.

This functionality is currently being completed and will be available at the end of August.

Performance

With all these new possibilities it becomes tempting to provide everything you can select on your worksheet with a scroll animation. Note, however, scroll animations are especially heavy for older browsers & devices. With every tap on your mouse, the browser has to perform calculations. It also differs per OS and mouse how the scroll speed is set.

We can not tell you what the maximum is. This is entirely dependent on the structure of the page. Use the animation in moderation. Besides performance, it can also become annoying for the reader if you use too much animation. On our inspiration page some examples have been placed where the scroll animation has been applied.

Next step, mobile

For now we have only set the scroll animations on desktop. The next step is preparing a simplified version for mobile. What we will work out here is a simpler preset with just enough options to make the page more exciting.

Ready to start? Read the new documentation

Simultaneously with the building of all new animation possibilities, we have also completely renewed our help website. All articles have been rewritten in English with accompanying (English) help videos. Open the new support website

Originally published at www.maglr.com.