Example 1: Auto-Count Animation for a Number

1.1 Drag in the Content:

• Add the content (e.g., a number) to your page. Make sure it's within an appropriate element (such as a <span>).

1.2 Select the Element:

• Click on the primary tag of the element that contains the number you want to auto-count. In your case, the element has the ID #g7f47liu.

1.3 Activate the Animation Modal:

• Click on the play icon in the right-hand sidebar to open the animation modal.

1.4. Configure the Animation:

• In the animation popup, set the following parameters:
  • 1.4.1 Operation: Choose "Number."
  • 1.4.2 Trigger: Set it to "OnView" so that the animation starts when the element becomes visible.
  • 1.4.3 Save your Page and Preview: Save your changes and preview your page to see the auto-count animation in action.

1.5. Customize Parameters (Optional):

• To enhance the auto-count animation, consider adding custom parameters:
  • 1.5.1 Easing: Set the easing to 10 steps for smoother transitions.
  • 1.5.2 Stagger: Adjust the stagger time (e.g., 200ms) to control the timing between individual counts.

---

Example 2: Multicolor Animation on a Square

2.1 Add an Empty <div>:

• Drag an empty <div> element onto your page. Adjust its width and height according to your preference.

2.2 Select the Element:

• Click on the <div> element you've added.

2.3 Set CSS Color:

• 2.3.1 Click on the filter icon (gear icon) to access the styling options.
• 2.3.2 Set the CSS color to red (or any color of your choice).

2.4 Activate the Animation Modal:

• Click on the play icon in the right sidebar to open the animation modal.

2.5 Configure the Animation:

• In the animation popup:
  • 2.5.1 Operation: Choose "Default."
  • 2.5.2 Trigger: Set it to "InView" so that the animation activates when the user views the page
  • 2.5.3 Double Click on the Timeline:
    • Double click on the timeline to create keyframes at specific time intervals (e.g., 1s, 2s, 3s).
    • Notice the red color on the active timeframe.
  • 2.5.4 For each keyframe (1s, 2s, 3s), set the background color:

2.5.4.1. (1s): Red

2.5.4.2 (2s): Purple

2.5.4.3 (3s): Green

2.6 Save and Preview:

• Make sure you are on the first keyframe in the animation timeline. Save your page and preview it to see the multicolor animation in action.

2.7 Optional Animation Parameters:

• To enhance the animation:
  • 2.7.1 Enable the "Alternate" option to make the colors alternate back and forth.
  • 2.7.2 Set the loop count (e.g., 10) to repeat the animation multiple times.

Feel free to experiment with different colors and parameters to achieve your desired effect! If you have more examples or need further assistance, feel free to ask. 😊

---

Example 3: Letterized Text Animation

3.1. Add a Text Element:

• Drag a text content element onto your page. This will be the text you want to animate.

3.2. Select the Text Element:

• Click on the text element you've added to select it.

3.3 Activate the Animation Modal:

• Click on the play icon in the right sidebar to open the animation modal.

3.4. Configure the Animation:

• In the animation popup:
  • 3.4.1 Operation: Choose "Default."
  • 3.4.2 Trigger: Set it to "OnLoad" so that the animation starts when the page loads.
  • 3.4.3 Click on letterized on tab
  • 3.4.4 Set Up Keyframes:
    • Double click on the timeline to add keyframes at specific time intervals (e.g., 0.3s, 1.3s, and 2.3s).
    • Customize the animation for each keyframe:

      • 3.4.1 (a-d) First Keyframe (0.3s):

        • Set the CSS transform scale to 1.6 to enlarge the text.

        • 

      • 3.4.2 (a-d) Second Keyframe (1.3s):

        • Set the CSS transform scale to 1 to return the text to its original size.

        • 

      • 3.4.3 (a-d) Third Keyframe (2.3s):

        • Set the CSS transform scale to 1.6 again.
        • 

3.5 Save and Preview:

• Save your changes and preview your page to see the letterized animation (make sure you click to the initial node i.e 0.3s before saving).

  

3.6. Additional Features (Optional):

• To enhance the letterized animation:
  • 3.6.1 Target Children:
    • Enable this option to make the animation wavy, targeting each letter individually.
  • 3.6.2 Stagger:
    • Set a stagger time (e.g., 100ms) to introduce a delay between each letter animation.
  • 3.6.3 Loop:
    • Specify the loop count (e.g., continuous or a specific value) to repeat the animation.
  • 3.6.4 Easing (Spring):
    • Choose a spring easing effect to make the text bounce during animation.

Feel free to experiment with these additional features to create a dynamic and engaging letterized animation! If you have more examples or need further assistance, feel free to ask. 😊

Example 4: Rolling Ball Animation

4.1 Add an Empty <div>:

• Drag an empty <div> element onto your page. Adjust its width and height according to your preference and make it a circle (using a radius of 50% or the rounded-full class).

4.2 Select the Element:

• Click on the <div> element you've added.

4.3 Set CSS Color:

• 4.3.1 Click on the filter icon (gear icon) to access the styling options.
• 4.3.2 Set the CSS color to any color of your choice.

4.4 Activate the Animation Modal:

• Click on the play icon in the right sidebar to open the animation modal.

4.5 Configure the Animation:

• In the animation popup:
  • 4.5.1 Operation: Choose "Default."
  • 4.5.2 Trigger: Set it to "onClick" so that the animation activates when the user clicks the element.
  • 4.5.3 Set the animation to "Loop" and ease to "Steps: 10"
  • 4.5.4 Double Click on the Timeline:
    • Double click on the timeline to create keyframes at specific time intervals (e.g., 1s, 2s, 3s).
    • Notice the red color on the active timeframe.
    • For each keyframe (1s, 2s, 3s), set the CSS properties and attributes as follows:

4.5.4.1. (1s):

• Set the CSS properties and attributes to achieve the following:
  • top: 50%;
  • left: 50%;
  • transform: translate(-50%, -50%) rotate(0deg); (Initial position and rotation)

4.5.4.2. (2s):

• Set the CSS properties and attributes to achieve the following:
  • top: 30%; (Move to new position)
  • left: 70%; (Move to new position)
  • transform: translate(-50%, -50%) rotate(180deg); (Midway rotation)

4.5.4.3. (3s):

• Set the CSS properties and attributes to achieve the following:
  • top: 50%;
  • left: 50%;
  • transform: translate(-50%, 50%) rotate(360deg); (Final position and rotation)

4.6 Save and Preview:

• Make sure you are on the first keyframe in the animation timeline. Save your page and preview it to see the rolling ball animation in action.

Example 5: Rotating Wheel Animation with Icon/SVG Elements

5.1 Add SVG Elements to Create a Circular Wheel:

• In the midst of other contents on the page, add an element and make a circle, with four SVGs well positioned at the top, right, bottom, and left.

5.2 Activate the Animation Modal:

• Click on the play icon in the right sidebar to open the animation modal.

5.3 Configure the Animation:

• In the animation popup:
  • 5.3.1 Operation: Choose "Default."
  • 5.3.2 Trigger: Set it to "onScroll" so that the animation activates when the user scrolls across the page.
  • 5.3.3 Double Click on the Timeline:
    • Double click on the timeline to create keyframes at specific time intervals (e.g., 0.2s, 1.1s).
    • Notice the red color on the active timeframe.
  • 5.3.4 For each keyframe (0.2s and 1.1s), set the CSS properties and attributes as follows:

5.3.4.1. (0.2s):

• Set the CSS properties and attributes to achieve the following:
  • transform: rotate(0deg); (Initial position and rotation)
  • scale: 1

5.3.4.2. (1.1s):

• Set the CSS properties and attributes to achieve the following:
  • transform: rotate(359deg); (Final position and rotation)
  • scale: 1.6

5.4 Save and Preview:

• Make sure you are on the first keyframe in the animation timeline. Save your page and preview it to see the rotating wheel animation in action.

Conclusion:

Animations enhance user experiences, making your web and app interfaces more engaging. Experiment with different animation types, customize parameters, and explore creative possibilities within Appmint. Remember to preview your work to see the animations come to life!

Happy animating! 🚀🎨