Animation Configuration

Explore dynamic animations for web components in this tutorial. Learn how to add and configure animations for a more engaging web experience.

Introduction

Creating an engaging and interactive web could elevate the users experience. In Momen's latest update, we've introduced animations effects that breathe life into your web components. In this tutorial, you'll discover how you can elevate your web design with these interactive dynamic effects.

To enrich the interactive effects on the Web side, the current version adds animation for four components: button, image, text and video. The animation effects for other components will be updated in the future version.

Animation Adding Entrance

Add a [button] in the editor, in addition to add interactive action in the component, you can also select the dynamic effects in the side bar.

Animation Configuration

Animation effect demo:

Trigger mode: hover (triggered when mouse moves to the component), click, when scroll into view, while scrolling

Configuration items

• Effects:

  1.Appear/disappear: slide, fade, grow, shrink 2.Emphasis: pulse, blink, bounce, flip

• Type: slide in/ slide out

• Direction: top, bottom, left, right, left top, left bottom, right top, right bottom

• Distance: When the effect is "Slide", it'll move a certain distance in pixels in the set direction.

• Scale: When the effect is "Grow" or "Shrink", the adjustment will be made according to the proportion.

• Loop: When the effect is "Emphasis", you can configure whether to loop the trigger effect.

• Axis: When the effect is "Flip", you can set the component to flip in X, Y, Z axis.

• Start Point: when the trigger mode is "when scroll into view", you can set the effect to be triggered when the component is scrolled to a percentage position on the screen.

• Delay: the effect will be triggered after a delay time, in milliseconds.

If you encounter any issues during the process, feel free to join our Discord community for assistance.

About Momen

Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.