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:

• How to add an animation
• How to access the element animations through the Elements toolbar
• How to access the element animations through the settings pop-up
• How to customize the Animation settings
• Review

How to add an animation

1. Log in to your Account Manager via https://www.networksolutions.com/my-account/login.
2. Select Websites on the left menu, and you will be routed to a different tab where you can access your website editor.
   
   
    
   Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
3. Launch your website editor by choosing Edit Site.
   
   
    
4. Once you click on an element, there are two places to access animations: the Element toolbar and the Element settings pop-up menu.
   
   
    
5. 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.

How to access the element animations through the Elements toolbar

1. Log in to your Account Manager via https://www.networksolutions.com/my-account/login.
2. Select Websites on the left menu, and you will be routed to a different tab where you can access your website editor.
   
   
    
   Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
3. Launch your website editor by choosing Edit Site.
   
   
    
4. Click on the Element directly to reveal its toolbar.
   
   
    
5. Next, select the rocket ship icon to pull up the Animations menu. 
   
   
    
6. Select an animation by clicking on it. Preview by hovering over the selections.
   
   
    

How to access the element animations through the settings pop-up

1. Log in to your Account Manager via https://www.networksolutions.com/my-account/login.
2. Select Websites on the left menu, and you will be routed to a different tab where you can access your website editor.
   
   
    
   Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
3. Launch your website editor by choosing Edit Site.
   
   
    
4. Click on the Element directly to reveal its toolbar and click More.
   
   
    
5. Then select Advanced from the Elements toolbar. The settings Pop-up will appear to the right. Select Animations.
   
   
    
6. In the settings pop-up for animations, you will see images for every possible animation.
   
   
    
7. If you hover over each selection with your cursor as you scroll through them, you will be able to preview what that animation does.

How to customize the Animation settings

1. Log in to your Account Manager via https://www.networksolutions.com/my-account/login.
2. Select Websites on the left menu, and you will be routed to a different tab where you can access your website editor.
   
   
    
   Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
3. Launch your website editor by choosing Edit Site.
   
   
    
4. Once you select an animation, you can customize it by clicking the Customize button to the top-right of the Settings pop-up.
   
   
    
5. 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.
   
    
6. Once finished, be sure to Save and Publish to make your changes live.