1. Knowledge Base
  2. >
  3. How To Add Animations (VIDEO)

How To Add Animations (VIDEO)

Looking for help for the GATOR Builder by HostGator Website Builder product? Please see GATOR's Knowledge Base.
This content only applies to those using GATOR Builder by HostGator.

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.

    User-added image

  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.
Keep reading to find out how to access both.
Pro Tip: Depending on the Element, only one animations menu will be available; however, its good to be familiar with both ways as the two options have differences.

User-added image

  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.

    User-added image

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

    User-added image

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

    User-added image

  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

Pro Tip: Hovering over each element allows you to see what that element looks like both on the settings pop-up and on the actual page, the element will mimic that animation in the background. Try testing a few different animations out by clicking from one to another and looking at it on your page or in preview mode.

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.

    User-added image

  2. A pop-up will appear where you can edit how your animation behaves.

    User-added image

    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.
Pro Tip: Since these items take previewing to adjust and make sure they look right, we recommend that you try a few settings then preview the website by clicking Preview in the top right-hand menu.