The MegaTech template includes pre-built animations to enhance your website's interactivity, such as scroll animations, hover effects, click animations, and page load animations.
How to add animations
- Select an element with an animation. In the navigator, all elements with the 'lightning' icon have an interaction.
![interactions-8.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/56889b5e-d904-4874-8c64-4f35fa5dbf6d/interactions-8.png)
- Choose a trigger such as 'Scroll Into View', 'Click', or 'Hover'.
![interactions-2.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/bf020efb-b49b-4fd4-a886-27b68aa40f11/interactions-2.png)
- Select an animation type like 'Move', 'Fade', or 'Scale', or choose from the pre-built ones. Some animations work only for specific elements.
![interactions-3.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/f7586252-3168-4352-abf5-53bc780375e2/interactions-3.png)
- Adjust parameters such as duration, direction, offset, and delay.
![interactions-4.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/f8b9e415-7345-42b6-835e-35bd828b9fbe/interactions-4.png)
- Preview the animation using the 'Preview' button
![interactions-5.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/de18f443-48a5-4c85-8d44-7d21c1328f2b/interactions-5.png)