Adding Animations and Transitions

Introduction

Animations make your website feel alive and professional. In this tutorial, you'll learn how to add animations to your elements using Structor's animation system, including entrance animations, hover effects, scroll-triggered animations, and more.

Step 1: Add an Entrance Animation

1.1 Select an Element

1. Add a Text or Div element to your canvas
2. Select it

1.2 Add On Load Animation

1. Open the Animations tab in the right panel
2. Click + Add Animation
3. Set Trigger to: On Load
4. Select a preset animation:
   • Fade In: Element fades in smoothly
   • Slide In Up: Element slides in from bottom
   • Zoom In: Element scales up as it appears
5. Configure settings:
   • Duration: 600ms (adjust to your preference)
   • Delay: 0ms (or add delay for staggered effects)
   • Easing: ease-out

Step 2: Add Hover Effects

1. Select a button or card element
2. Open Animations tab
3. Add a new animation with trigger: On Hover
4. Select Scale preset:
   • This will make the element grow slightly on hover
5. Set duration to 200ms for quick response
6. Preview to see the hover effect

Step 3: Create Staggered Animations

Staggered animations create beautiful sequential effects for lists or grids:

1. Create a container with multiple child elements (e.g., 3 cards in a row)
2. Select the first child element
3. Add On Load animation with Fade In Up
4. Set delay to 0ms
5. Select the second child and add the same animation
6. Set delay to 100ms
7. Select the third child and set delay to 200ms
8. Preview to see the staggered effect

Step 4: Add Scroll-Triggered Animations

4.1 Using Scroll Effects

1. Select an element you want to animate on scroll
2. In the right panel, find Scroll Effects section
3. Toggle Enable Scroll Effects
4. Choose a preset:
   • Parallax (Subtle): Element moves slower than scroll
   • Fade In: Element fades in as you scroll
   • Scale Up: Element grows as it enters viewport
5. Adjust Speed and Range as needed

4.2 Using On Scroll Animation

1. Select an element
2. Add animation with trigger: On Scroll
3. Select Fade In or Slide In
4. The animation will play when the element enters the viewport

Step 5: Combine Multiple Animations

You can add multiple animations to a single element with different triggers:

1. Select an element
2. Add On Load animation: Fade In
3. Add On Hover animation: Scale
4. Add On Click animation: Bounce
5. Each animation will trigger independently

Step 6: Use Signal-Based Animations

Signal animations let you trigger animations from actions:

1. Select an element (e.g., a modal overlay)
2. Add animation with trigger: On Signal
3. Set signal name to: showModal
4. Select Fade In animation
5. Create a button with an On Click action
6. In the action flow, add Emit Signal node:
   • Signal Name: showModal
7. Clicking the button will trigger the animation

Step 7: Performance Best Practices

• Use transforms and opacity: These properties are GPU-accelerated and perform better than changing position or color
• Keep durations reasonable: 200-600ms for interactions, 300-1000ms for entrances
• Limit simultaneous animations: Too many animations at once can cause jank
• Use will-change sparingly: Only when necessary for complex animations
• Test on mobile: Animations can feel different on touch devices

Congratulations!

You've learned how to:

• Add entrance animations
• Create hover effects
• Build staggered animations
• Use scroll-triggered animations
• Combine multiple animations
• Trigger animations with signals

Next Steps

• Combine with actions for interactive animations
• Explore all animation presets in the documentation
• Create custom animations using CSS in custom components