MAGLR BLOG / 13 August 2018

You can now create beautiful interactive scroll pages yourself

With Maglr Pro there is a wide range of animation possibilities. Starting 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 can 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 immediately:


From fullscreen to longreads

The Pro editor was originally designed for fullscreen pages. With a fullscreen page, all elements are always located in the viewport. Based on duration and 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 is possible that the animation is already finished before you have scrolled to that particular point.


Scroll animations

Scroll animations are nothing new, after looking at different websites on the inspiration website Awwwards we came 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 a sense of depth during scrolling.

So this is what we wanted 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 you to achieve the same end result, created by a single designer, without technical knowledge.

Working out the possibilities took some time ...


Still easy to understand for the designer

There are many 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. This designer has great ideas, but doesn't need to worry about technology. This designer must be able to work directly in Maglr and turn his ideas into a visual interactive pages.

Sometimes simplicity clashes with advanced features. 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- and outgoing animations

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

That's why we started to use percentages to point out where the animation should start. An indication line is clearly shown on the specific location in the editor. When the element reaches that position, the animation starts. 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 stop 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 will follow during the animation.

 

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 at the same speed. With the parallax animation you can 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

Lock 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 visible 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 isn't quite finished yet is the vertical scroll path. Just like with the 'keyframe animation' mentioned above, you can 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 can 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 lock an element (sticky) while walking through a path.

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

Performance

With all these new possibilities you can be tempted to use lots of different scroll animations on your page. Note that, scroll animations are especially heavy for older browsers and devices. With every scroll of 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 limits are. This depends entirely on the structure of the page. Therefor use the animations in moderation. Besides performance, it can also become annoying for the reader if you use too much animations. On our inspiration page we placed some examples where a scroll animation has been applied.

Next step, mobile

For now the scroll animations are only available on desktop. Our next step is to prepare a simplified version for mobile. To do that, we plan to make 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 support website. All articles have been rewritten in English accompanied with English videos. Open the new support website