Skip to main content

🎬 Creating Smart Animations

This step-by-step guide will walk you through creating your first Smart Animation in AppStruct. Smart Animations allow you to create smooth, professional transitions between different states of your app.

Prerequisites​

Before creating Smart Animations, ensure you have:

  • ✅ A project with at least one screen/page
  • ✅ Elements positioned on your canvas (buttons, images, text, etc.)
  • ✅ Basic understanding of the AppStruct interface

Step 1: Set Up Your Trigger Element​

1.1 Select Your Trigger Element​

  1. In the AppStruct editor, click on the element that will trigger the animation
  2. This is typically a button, image, or any clickable element
  3. The element will be highlighted with a blue border when selected

1.2 Access Element Actions​

  1. With your element selected, look at the left sidebar
  2. Click on "Add Action" in the element settings
  3. From the dropdown menu, select "More actions..."

1.3 Add Smart Animation Action​

  1. The Workflow Canvas will open
  2. Click the plus (+) button to add a new action
  3. Navigate to "Interaction" category
  4. Select "Smart Animation" from the list
💡 Tip: The Smart Animation action is different from regular actions - it creates 
a multi-screen animation sequence rather than a single action.

Step 2: Enter Smart Animation Mode​

2.1 Smart Animation Setup​

  1. After adding the Smart Animation action, click "Edit Smart Animation"
  2. AppStruct will enter Smart Animation Mode
  3. You'll see the interface change with:
    • Animation timeline at the top
    • Screen indicators showing animation steps
    • Exit Smart Animation button

2.2 Understanding the Interface​

  • Screen 1 (Original): Your starting state
  • Screen 2+ (Target): Where elements will animate to
  • Preview Controls: Test your animation
  • Screen Navigation: Switch between animation screens

Step 3: Create Your Animation Sequence​

3.1 Add Animation Screens​

  1. In Smart Animation Mode, click "Add Screen"
  2. This creates a new screen in your animation sequence
  3. You can add multiple screens for complex animations

3.2 Position Elements on Target Screen​

  1. Switch to Screen 2 (or your target screen)
  2. Reposition elements where you want them to end up:
    • Drag elements to new positions
    • Resize elements using the corner handles
    • Change element properties (colors, text, etc.)
  3. Elements with the same ID will automatically animate between screens

3.3 Element Matching​

AppStruct automatically matches elements between screens based on:

  • Element ID (primary matching method)
  • Element type and properties
  • Position similarity
⚠️ Important: Keep element IDs consistent between screens for smooth animations.
If an element exists on Screen 1 but not Screen 2, it will fade out during animation.

Step 4: Configure Animation Settings​

4.1 Access Animation Settings​

  1. While in Smart Animation Mode, select your trigger element
  2. In the right sidebar, you'll see animation configuration options
  3. Here you can adjust all animation parameters

4.2 Choose Animation Type​

Select from available animation types:

TypeEffectBest For
SmartIntelligent path-findingComplex layouts
BounceSpring-like bouncingPlayful interactions
FadeOpacity transitionsSubtle changes
SlideLinear movementDirectional navigation
ZoomScale-based transitionsFocus changes
InstantNo animationTesting/debugging

4.3 Adjust Timing Settings​

Duration (0.1 - 3.0 seconds)

  • Fast: 0.2-0.4s for quick interactions
  • Medium: 0.5-0.8s for standard animations
  • Slow: 1.0s+ for dramatic effects

Damping (10 - 1000)

  • Low values (50-200): More oscillation/bouncing
  • High values (300-500): Smoother, less bouncy

Stiffness (100 - 1000)

  • Low values: Slower, more gradual animations
  • High values: Faster, more responsive animations

Easing Options:

  • Linear: Constant speed
  • Ease In: Slow start, fast finish
  • Ease Out: Fast start, slow finish
  • Ease In Out: Slow start and finish
  • Circ In/Out: Circular motion curves
  • Anticipate: Slight backward motion before forward

Step 5: Test Your Animation​

5.1 Preview Mode​

  1. Click the "Preview" button in Smart Animation Mode
  2. Your animation will play automatically
  3. Observe how elements transition between screens

5.2 Interactive Testing​

  1. Exit Smart Animation Mode temporarily
  2. Enter Preview Mode for your entire app
  3. Click your trigger element to see the animation in context
  4. Test on different devices/screen sizes

5.3 Debugging Common Issues​

Elements Not Animating:

  • Check that elements exist on both screens
  • Verify element IDs match between screens
  • Ensure elements aren't hidden or overlapped

Jerky/Choppy Animation:

  • Reduce animation duration
  • Increase damping value
  • Simplify the animation path

Animation Too Fast/Slow:

  • Adjust duration setting
  • Modify stiffness for responsiveness
  • Test with different easing curves

Step 6: Advanced Techniques​

6.1 Multi-Element Animations​

  1. Position multiple elements differently on target screens
  2. All elements will animate simultaneously
  3. Stagger timing by creating multiple screens

6.2 Content Changes​

  1. Change text content between screens
  2. Swap images for dynamic visual effects
  3. Modify colors and styles for state changes

6.3 Complex Sequences​

  1. Add 3+ screens for multi-step animations
  2. Create intermediate states for smoother transitions
  3. Use different animation types between screen pairs

Step 7: Finalize and Save​

7.1 Final Review​

  1. Test all animation screens in sequence
  2. Verify timing and easing feel natural
  3. Check performance on target devices

7.2 Exit Smart Animation Mode​

  1. Click "Exit Smart Animation Mode" when satisfied
  2. Your animation is automatically saved
  3. The trigger element now has the Smart Animation action attached

7.3 Integration with App Flow​

  1. Test in full app context using Preview mode
  2. Verify the animation fits with your app's user flow
  3. Adjust other elements if needed to accommodate the animation

Common Use Case Examples​

Example 1: Button to Modal Animation​

  1. Start: Small "Details" button
  2. End: Full-screen modal with product details
  3. Animation: Button expands and morphs into modal background

Example 2: Card Expansion​

  1. Start: Small product card in a list
  2. End: Expanded card with full details
  3. Animation: Card grows and reveals additional content

Example 3: Menu Transformation​

  1. Start: Hamburger menu icon
  2. End: Full navigation menu overlay
  3. Animation: Icon morphs and expands into menu

Best Practices​

✅ Do:​

  • Keep animations under 1 second for best UX
  • Test on mobile devices for performance
  • Use consistent animation styles throughout your app
  • Preview frequently during development
  • Consider accessibility - provide options to disable animations

❌ Don't:​

  • Animate too many elements simultaneously
  • Use overly complex paths between screens
  • Make animations too slow (over 1.5 seconds)
  • Forget to test on different screen sizes
  • Overuse animations - they should enhance, not distract

Troubleshooting​

Animation Not Working:​

  1. Check that Smart Animation action is properly attached
  2. Verify elements exist on both animation screens
  3. Ensure no JavaScript errors in browser console

Poor Performance:​

  1. Reduce number of animated elements
  2. Simplify animation paths
  3. Use faster animation types (instant, fade)
  4. Test on target devices

Elements Jump Instead of Animate:​

  1. Check element ID consistency
  2. Verify element types match between screens
  3. Ensure elements aren't hidden

Next Steps​

Now that you've created your first Smart Animation, explore more advanced features:

👉 Animation Types & Settings →

👉 Transition Configuration →

👉 Smart Animation Workflow →

Smart Animations are a powerful way to create engaging, professional app experiences. With practice, you'll be able to create complex, smooth transitions that delight your users and make your app feel polished and responsive.