Bring depth into your design with the new ‘mouse move’ effect
Prior to a number of major updates that are coming up in May, we already have updated a few things within the Maglr Pro editor. Besides a series of smaller bug fixes, in this blog we show you a short explanation of nice new functionalities that are useful to know.
Setting the ‘Mouse move’ effect
The ‘Mouse move’ animation can be applied to a group or element via the effects panel. What the effect simply does, is transfer the movement of your mouse to the element. Through the effect settings, you can choose how the element should respond to the ‘mouse movement’. You can enter a positive or negative value on the horizontal or veritable axis with the slider.
Create depth
To create depth, you need to apply the effect to multiple overlapping elements. You want to give the idea that some elements are close and other elements are far away. You can do this by giving the elements multiple speeds in the above settings panel.
If you do this, for example, with four elements, then you give the top layer a setting of 0.3, the second layer 0.25, the third 0.2, etc. The foreground moves faster on the basis of your mouse movement than the background.
You determine the direction of whether the elements can only move horizontally or vertically. When testing the different settings you quickly get an idea how to use this effect in different designs.
On tablet and mobile without a mouse
Devices without a mouse are often equipped with a Gyro sensor. Instead of the mouse movement, you see the elements move based on the movement of your device.
Currently, it’s only possible to apply this effect in desktop mode.
The new mask animation
This is a very simple, but subtle animation type. The ‘mask animation’ looks like a normal move, the only difference is the element does not start all the way from the corner of the page, but from the masked frame of the element itself.
The masked animation has multiple starting points and can be used for in & outgoing animations. A group or element to which a mask animation has been applied, is still masked after the animation is done. You can also see this effect with a ‘Grow’ or ‘Mouse move’ effect. Everything that comes outside the frame of the element is masked / cut off.
Extra video settings
We have made an adjustment in both the Youtube and Vimeo player. It is now possible to start a video at a certain time, for example at 00:09 sec instead of the beginning of the video.
In the settings it’s also possible to indicate what the desired quality is. Suitable for background videos that may need to start faster and run at lower quality.
New link option: Scroll to element
With several vertical scenes it is already possible to link to a specific scene. On longpages (with a lot of content and subchapters) it is now possible to link to a specific element on this long page.
This option is easy to combine with a sticky scene that is transparent over a long page. In the sticky scene you can build a menu where, after clicking on the menu item, the page scrolls to the relevant item.
Create a social share button
A frequently asked question, is the option to create social buttons in a page. For this reason, we added a new link option to dropdown called; ‘Social’.
It is possible to set a link on a button, photo or shape. You need to design these buttons yourself. Through the settings you can choose the well-known networks like Facebook / Twitter / Pinterest and Linkedin. As soon as a user clicks the button, the share functionality for that page is activated.
Change SEO meta data
When sharing a Maglr page you can see the title & description along with an image in the timeline of the social network. It’s possible to change the contents of this meta data.
You can do this within the SEO settings of your publication or separately per page at the specific SEO page settings. Please note, once it is shared, it may take several hours before the social network sees the new changes.
