Motion Effects

If you wish to add some cool effects to your website, you can simply manage to do that with the powerful Motion Effects controls that allow you to create exceptional animations for your website. No need to get your hands dirty with custom code, you can incorporate amazing effects to make your website stand out. 

  1. To access Motion Effects go to the Section, Column, or Element you want to add the effects and go to the Advanced Tag. 
  2. Under Motion Effects, you can select to add a Scrolling Effect or a Mouse Effect. 

Scrolling Effect

Enable the switch of the Scrolling Effect to add effects on your Section, Column, or Element and see the list of the amazing scrolling effects you have available. 

Vertical Scroll 

This splendid scrolling effect will the elements move at a different speed than the page while the users scroll down. You can customize the effect by choosing the speed, direction, and viewport values. 

  1. Direction - Chose the direction in which you want your effect to go either Up or Down 
  2. Speed - Select the speed duration for your effect 
  3. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen.  Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height.

Horizontal Scroll

Horizontal Scroll is another amazing effect that will make the section/element move right or left while the user scrolls down the page. 

  1. Direction - Chose the direction in which you want your effect to go either Left or Right. 
  2. Speed - Select the speed duration for your effect 
  3. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen. Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height.

Transparency

The Transparency effect will make your content transparent or more visible as the user scrolls down the page. This effect would be a great choice for big titles. As the user scrolls down the page, the text will start to dissolve. 

  1. Direction - Chose the direction in which you want your effect to go either Fade In, Fade Out, Fide Out In, Fade In-Out. 
  2. Speed - Select the speed duration for your effect 
  3. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen. Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height.

Blur 

  1. The Blur effect will make your content blur while the user scrolls on the page. The effect would make a great choice for background images, where the content will be clearer in correlation with scrolling. 
  2. Direction - Chose the direction in which you want your effect to go either Fade In, Fade Out, Fide Out In, Fade In-Out. 
  3. Speed - Select the speed duration for your effect 
  4. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen. Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height   

Rotate

If you enable the Rotate effect then your elements that you attribute the effect to will have rotating aftermath. For more control, you can edit the options and create a beautiful effect to wow your visitors. 

  1. Direction - Chose the direction in which you want your effect to go either Fade In, Fade Out, Fide Out In, Fade In-Out. 
  2. Speed - Select the speed duration for your effect 
  3. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen. Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height.

Scale

Enabling the scaling effect will make your content and elements to grow and shrink as the users scroll down the page. You can configure the options to make the content better. 

  1. Direction - Chose the direction in which you want your effect to go either Scale In, Scale Out, Scale Down Up, and Scale Up Down. 
  2. Speed - Select the speed duration for your effect 
  3. Viewport - This option will allow you to determine when the movement will begin based on viewport height, which is the visible site of the device screen. Let's say you set the value to 50 it means the effect will take place after the user has scrolled half the viewport height. 
  4. X Anchor Point - This option will let you choose the horizontal axis from where the element will scale. Either go with Left, Center, or Right. 
  5. Y Anchor Point - This option will let you choose the vertical axis from where the element will scale. Either go with Left, Center, or Right. 
  6. Apply Effects on Desktop, Tablet, or Mobile. 
  7. Effect Relative To Choose either Default, Viewport, or Entire Page.

Mouse Effects 

The mouse effect will add more movement and animation to your website, making the content more engaging and enthralling for your visitors.

Mouse Track 

One cool effect you can add is the mouse tracks that will add some depth to your site while the user moves the mouse. Just like for scrolling effects, you can customize and configure the options for the effect and create something beautiful out of it. 

  1. Direction - Choose the direction of the effect as the user moves the mouse either Opposite or Direct. 
  2. Speed - Set the speed value for effect to take place

3D Tilt

Similar to Mouse Track, the elements will be triggered by the mouse and as the moves around giving more depth and a three-dimensional illusion to your site. You can customize and configure the values to create amazing mouse effects. 

  1. Direction - Choose the direction of the effect as the user moves the mouse either Opposite or Direct. 
  2. Speed - Set the speed value for effect to take place

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.