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.
No time to read? Open the results immediately:
- 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, 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 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.
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:
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.
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.
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.
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.
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.
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