Builder brands: How to add animations

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

In this article, we will discuss:

• Adding an animation
• Accessing the element animations through the Elements toolbar
• Accessing the element animations through the settings pop-up
• Customizing the animation settings
• Review

Adding an animation

1. Log in to your account via https://www.networksolutions.com/my-account/login.
2. Click Websites & Hosting from the left navigation menu.
   
   
    
3. Navigate to the hosting package that you want to access with Website Builder, then click Manage to continue.
   
   
    
4. On your Website Builder dashboard, tap Edit Site.
   
   
    
5. Once you click on an element, there are two places to access animations: the Element toolbar and the Element settings pop-up menu.
   
   
    
6. To begin working with the 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.
   
   

Keep reading to find out how to access both.

Accessing the element animations through the Elements toolbar

1. On your Website Builder dashboard, tap Edit Site.
   
   
    
2. Click on the Element directly to reveal its toolbar.
   
   
    
3. Next, select the rocket ship icon to pull up the Animations menu.
   
   
    
4. Select an animation by clicking on it. Preview by hovering over the selections.
   
   

Accessing the element animations through the settings pop-up

1. On your Website Builder dashboard, tap Edit Site.
   
   
    
2. Click on the Element directly to reveal its toolbar and click More.
   
   
    
3. Then select Advanced from the Elements toolbar. The settings Pop-up will appear to the right. Select 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 the animation settings

1. On your Website Builder dashboard, tap Edit Site.
   
   
    
2. Once you select an animation, you can customize it by clicking the Customize button to the top-right of the Settings pop-up.
   
   
    
3. 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.
   • Change the Duration and the Delay Start time.
   • Change the Visible Scrolling Start Point.
      
4. Once finished, be sure to Save and Publish to make your changes live.