How To Add Animations (VIDEO)

When you land on a modern website, there are certain things about it that intentionally standout to draw your attention. Whether it's a rotating, flashing logo effect or fade-in background, adding effects like these to an element can give that element extra attention.

In your Gator website builder, these effects are called "Animations." These animations give life to the elements you add to your project and allow you to create a dynamically modern looking website. In this article, we will cover the Basics of Adding Animations to Elements and  Customizing Settings. Below is a video walkthrough of the steps as well.

Adding Animations:

1. To begin working with Animations, click on the element that you want to add an animation to and the Element Toolbar will appear. In this example, we will add a fly-in effect to the navigation bar.
   
   

2. Once you click on an element, there are two places to access animations:

• The Rocketship in the Element Toolbar  -or- 
• The Element Settings Pop-up Menu.

1. To access the Element Toolbar's Animations, click on the Element directly to reveal its toolbar
2. Next, search for and select the rocketship for "Animations" in the menu that appears.
3. Select an animation by clicking on it. Preview by hovering over the selections.

To access the Element Animations through the Settings Pop-Up:

1. Click on the Element directly to reveal its toolbar.

   

2. Next, click More, then select Advanced from the Elements Toolbar.
   
   

3. The settings Pop-up will appear to the right. Select the rocketship next to Animations.
   
   

4. In the settings pop-up for Animations, you will see images for every possible animation.

5. If you hover over each selection with your cursor as you scroll through them, you will be able to preview what that animation does

Customizing Settings:

1. Once you select an animation, you can customize it by clicking the Customize button to the top-right of the Settings pop-up.
   
   

2. A pop-up will appear where you can edit how your animation behaves.
   
   
   
   From this pop-up menu, you can:

• Turn On/Off Elements Parallax, Run once, Run Loop.
• Change the location of where the Animation begins. The element will appear from here.
• Change the Duration and Delay Start time of an animation.
• Change the Visible Scrolling Start Point.