Motion Effects

Motion Effects are a powerful set of controls for adding beautiful transitions and animations to your design.. . Until now, web designers who wanted to incorporate animations and motion effects needed to use either external libraries and or custom code.. Page Builder 2.5 offers an all-in-one solution for creating parallax, animations and other motion effects - all seamlessly integrated into the Page Builder editor.. Scrolling Effects. . Use Scrolling Effects to create amazing animations and interactions when the user scrolls through the page. Here’s a list of the scrolling effects:. Vertical Scroll. . . This is the classic parallax effect you’ve been waiting for. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.. . Horizontal Scroll. . . Horizontal scroll means when the visitor scrolls up and down, the element moves right and left accordingly. An example of use - a section with clouds that moves to the right when the visitor scrolls down.. Transparency. . . Transparency lets you gradually make elements more transparent or more visible in correlation to the visitor’s scroll. An example is having a title appear and then dissolve in accordance with the scroll.. There are 4 possible effect directions:. Fade in - Meaning the element starts as transparent and gradually becomes visible.. Fade out - The element starts as visible and gradually becomes transparent.. Fade out in - The element starts as visible, then fades out, then becomes visible again.. Fade in out - The element starts as transparent, then becomes visible, then transparent again.. Blur. . This setting is similar to Transparency, only instead of transparency, the element gets blurred. A good example is background images, that get proper focus only when the user scrolls down.. Rotate. Here, the element rotates as you scroll. A nice example is seen in the rotation of stars in the image below:. Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales or rotates. If you set orientation left-top, the rotation will happen around the left-top point of the element. If you set orientation center-center, the rotation will rotate around its center, like a wheel. This setting is relevant only to the above ‘Rotate’ effect as well as the ‘Scale’ effect listed below.. Scale. . Scale lets you grow and shrink elements according to scroll. Example: A background that grows while scrolling.. Note: Use the 'Apply effects on ' to determine if motion effects are applied on mobile, desktop or tablet. Mouse effects will only affect desktop devices.. Mouse Effects. Mouse Track. Create a sense of depth by making elements move in relation to the visitor’s mouse movement.. . 3D Tilt. Similarly to how Mouse Track moves the element in relation to the mouse movement, the 3D Tilt effect tilts the element according to the same movement of the cursor.. . ChromeFirefoxSafariOperaEdgeInternet ExplorerSupportedSupportedSupportedSupportedSupportedSupported. * Slightly laggy behavior. Note: Page Builder respects the "reduced motion property" preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:. Mac: "System Preferences > Accessibility > Display" and check/un-check the box for "Reduce motion"iOS: "Settings > General > Accessibility" and turn on/off "Reduce Motion"Windows 10: "Settings > Ease of Access > Display > Simplify and personalise Windows".

Still puzzling over something?