Want to impress your site visitors? Need to improve your site interaction and attractiveness? Watch this video to learn what makes a site stand out and more enjoyable. You will be surprised to know that basic Animations can improve your site's experience.

Previous All Lessons Next

You will be surprised to know that basic Animations can improve your site's experience.

Animation Types

There are three main Animation types: Run on Display, Hover, and Sync with Scroll.

  • The first type is the Run on Display Animation, or Entrance, which starts when a web Element appears on the screen.
  • The second one is Hover Animation, which is triggered when you hover an Element on a web page.
  • The third type is Sync With Scroll, which means the Animation is played synchronically with the page scrolling, depending on how much you scroll down or up. So, if you stop scrolling, this Animation stops.

Create Block

Before we start, we need to create a Block. Let’s create a simple block with a Heading, Image, and Text and animate its Elements to make it enjoyable.

Run Nicepage, then create a Blank Site. By default, the Blank site is added with the Blank Block.

Add Heading

Click the Add Button at the top, go to the Text section, and choose Heading 2. Edit the Text by typing “I love web design​.” You can change the font. Make the Heading bold.

Add Image

You can add the Image from the Add Panel. Alternatively, press the ALT+I, search for the “designer,” and select any image you like.
Make the Image round by selecting the shape in the Properties. You can make the Image bigger.

Add Text

Add the Text from the Add Panel or press ALT+T. You can use the AI Text Builder to generate the Text by clicking the AI button on the Context Toolbar or from the Options. Enter “web design” in the prompt, and choose any text. Resize the Text.

Align the Elements horizontally and vertically.

Run On Display Animation

We start with the Run on Display Animation, also called the Entrance Animation. This Animation runs automatically when Page Elements appear on the screen. If it is on the top page, a user will see the Animation once the page is loaded.
When scrolling, you will see more Elements, and if those Elements have the Run On Display Animation, it starts automatically.

Add Animation to Elements

Click the Heading, go to the Property Panel, click the Animation option, then select Run On Display from the list.

Choose the Slide In preset and change the Direction by clicking the From Bottom icon. Then, test the Effect by clicking the Play button in the popup.

Now, apply the same Animation settings to the Image and Text, increasing the delay by 0.2 seconds each time so that they appear one after another.

Quick Preview to test the Run On Display Animation.

Animation On Hover

The second animation type is On Hover. There are many hover animation types, such as Animation On Hover, Image Background Hover Animation, and Animations on Box Hover: simple and expanded with Start Position. You can also use the Hover Slider Effect.

We recommend you start with the simplest and the most popular type, Animation On Element Hover.

Edit Animation Properties

Return to the Block. Select the Image, then go to the Property Panel. Scroll down to the Animation section and click the Plus icon. Choose the Hover Animation from the list.

Modify the Hover parameters as the following. Set Duration to 1, Rotate to 5, and Scale to 105.

Test the Hover Effect instantly with the Play button or in the Editor by clicking outside the Element and hovering it back.

Animation Sync With Scroll

The last Animation type you can use on your site is Scroll-Tracking or Sync With Scroll Animation. You can create such an animation with Nicepage without coding. We will change the positions of Elements in the block while scrolling the web page.

Before you start, note that Scroll-Tracking animations require taller blocks. Increase the Block Height to 1500px.

Delete Previous Animations

Delete the previously added Animations before adding the Sync On Scroll by clicking the Minus icon in Properties.

Add Animation to Heading

Let’s animate the Elements. Select the Heading Text. Go to the Property Panel and add the Sync With Scroll Animation.

Select Step 1, then modify the following parameters.

  • Select sticky;
  • X-positon: 200;
  • Y-position: 200;
  • Transparency: 0.

Add Animation to Image

Select the Image. Add the Sync With Scroll Animation.

For Step 1, do the following.

  • Select sticky;
  • X-positon: -300;
  • Y-position: 200;
  • Transparency: 0.

Add Animation to Text

Finally, Add the Sync With Scroll Animation to the Text.

Add the Sync With Scroll Animation, and set the following parameters in Step 1.

  • Select sticky;
  • X-positon: 200;
  • Y-position: 300;
  • Transparency: 0.

Test Animation

Publish or preview your site. Scroll down the page. The Elements change positions while you scroll down, returning to the original positions when you scroll up.

Related Article

Animation Effects

Want to impress your site visitors? Need to improve your site interaction and attractiveness? Watch this video to learn what makes a site stand out and more enjoyable. You will be surprised to know that basic Animations can improve your site's experience. <iframe style="width: 95%; aspect-ratio: 16 / 9; margin: 20px 0" src="https://www.youtube.com/embed/AuOUS-mMqEE" title="Nicepage Lesson: How to add Google Recaptcha" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <table width="95%"> <tr> <td width="33%" align="left">[Previous](page:545838)</td> <td width="34%" align="center">[All Lessons](page:1318)</td> <td width="33%" align="right">[Next](page:557042)</td> </tr> </table> ## You will be surprised to know that basic Animations can improve your site's experience. ## Animation Types There are three main Animation types: Run on Display, Hover, and Sync with Scroll. - The first type is the Run on Display Animation, or Entrance, which starts when a web Element appears on the screen. - The second one is Hover Animation, which is triggered when you hover an Element on a web page. - The third type is Sync With Scroll, which means the Animation is played synchronically with the page scrolling, depending on how much you scroll down or up. So, if you stop scrolling, this Animation stops. ## Create Block Before we start, we need to create a Block. Let’s create a simple block with a Heading, Image, and Text and animate its Elements to make it enjoyable. Run Nicepage, then create a Blank Site. By default, the Blank site is added with the Blank Block. ### Add Heading Click the Add Button at the top, go to the Text section, and choose Heading 2. Edit the Text by typing “I love web design​.” You can change the font. Make the Heading bold. ### Add Image You can add the Image from the Add Panel. Alternatively, press the ALT+I, search for the “designer,” and select any image you like. Make the Image round by selecting the shape in the Properties. You can make the Image bigger. ### Add Text Add the Text from the Add Panel or press ALT+T. You can use the AI Text Builder to generate the Text by clicking the AI button on the Context Toolbar or from the Options. Enter “web design” in the prompt, and choose any text. Resize the Text. Align the Elements horizontally and vertically. ## Run On Display Animation We start with the Run on Display Animation, also called the Entrance Animation. This Animation runs automatically when Page Elements appear on the screen. If it is on the top page, a user will see the Animation once the page is loaded. When scrolling, you will see more Elements, and if those Elements have the Run On Display Animation, it starts automatically. ### Add Animation to Elements Click the Heading, go to the Property Panel, click the Animation option, then select Run On Display from the list. Choose the Slide In preset and change the Direction by clicking the From Bottom icon. Then, test the Effect by clicking the Play button in the popup. Now, apply the same Animation settings to the Image and Text, increasing the delay by 0.2 seconds each time so that they appear one after another. Quick Preview to test the Run On Display Animation. ## Animation On Hover The second animation type is On Hover. There are many hover animation types, such as Animation On Hover, Image Background Hover Animation, and Animations on Box Hover: simple and expanded with Start Position. You can also use the Hover Slider Effect. We recommend you start with the simplest and the most popular type, Animation On Element Hover. ### Edit Animation Properties Return to the Block. Select the Image, then go to the Property Panel. Scroll down to the Animation section and click the Plus icon. Choose the Hover Animation from the list. Modify the Hover parameters as the following. Set Duration to 1, Rotate to 5, and Scale to 105. Test the Hover Effect instantly with the Play button or in the Editor by clicking outside the Element and hovering it back. ## Animation Sync With Scroll The last Animation type you can use on your site is Scroll-Tracking or Sync With Scroll Animation. You can create such an animation with Nicepage without coding. We will change the positions of Elements in the block while scrolling the web page. Before you start, note that Scroll-Tracking animations require taller blocks. Increase the Block Height to 1500px. ### Delete Previous Animations Delete the previously added Animations before adding the Sync On Scroll by clicking the Minus icon in Properties. ### Add Animation to Heading Let’s animate the Elements. Select the Heading Text. Go to the Property Panel and add the Sync With Scroll Animation. Select Step 1, then modify the following parameters. - Select sticky; - X-positon: 200; - Y-position: 200; - Transparency: 0. ### Add Animation to Image Select the Image. Add the Sync With Scroll Animation. For Step 1, do the following. - Select sticky; - X-positon: -300; - Y-position: 200; - Transparency: 0. ## Add Animation to Text Finally, Add the Sync With Scroll Animation to the Text. Add the Sync With Scroll Animation, and set the following parameters in Step 1. - Select sticky; - X-positon: 200; - Y-position: 300; - Transparency: 0. ## Test Animation Publish or preview your site. Scroll down the page. The Elements change positions while you scroll down, returning to the original positions when you scroll up. ## Related Article [Animation Effects](page:204908) ##