Add motion effects to make elements stand out from the rest of the page.

Follow the steps below to start adding animations to your element:

  • Click on the + icon

  • Go to the Content tab

  • Select an element

  • Go to the Animation tab

  • Select an animation option from the Animation Start settings

    • On Appear means the animations will begin once the element appears in the browser window

    • On Hover means the animations will begin once you mouse over the element

    • On Click means the animations will begin once you click on the element

    • On Trigger means the animation will appear once triggered by a script

  1. Select an Animation In that will appear once the Start Animation begins. For example if you select Hover, the animation will appear once the mouse is over the element

  2. Optionally, Select an Animation Out that will appear once the Start Animation stops. For example if you select Hover, the animation will appear once the mouse is not over the element anymore

  3. Set the option for the element to be Hidden, before or after the In-Animation. Mainly this is used when the In-Animation is set to an animation that has "in". For example: if you select to hide the element Before the in-animation. If your start animation option is On Click, the element won't be visible until you click it (so don't do this). 

  4. Set the boundary of the element in the Appearance Boundary. For example if set to 50 the animation will start once the element is scrolled past the middle of the browser window. Setting this to 100% will have the element animate immediately when the element scrolls into the browser window.

  5. Switch on the Infinite for the animation to keep repeating

  6. Set the Duration of the animation in milliseconds (lower duration equals faster motion)

  7. Set a delay for the in animation by the In-Delay settings (higher delay equals slower motion)

  8. Set a delay for the out animation by the Out-Delay settings (higher delay equals slower motion)

  9. Once you’ve selected your preferred settings, you can click on Save Changes and you're done!

Product

dxpr-builder