In this tutorial, you will learn how to move, resize, and blur the Shape Element on the screen.

Download and import the Block with this Animation Example.

animation-move-scale.gif

Add Block

  1. Add a new Block.
  2. Increase the Block Height by at least 2000.
  3. Set the Top Margin to 200.

Add Elements

  1. Add a Circle Shape.
  2. Make it red.
  3. Resize it if needed.
  4. Add and edit the Heading.
  5. Add and edit the Text.
  6. Align all Elements to the left.

Set Animation Properties

  1. Select the Shape.
  2. Go to the Property Panel.
  3. Click the Scroll in the Animation On section.
  4. Choose the Sync With Scroll (prior Step-By-Step).
  5. Trigger on the Window Bottom.

Step 1 Move

Set the Step 1 properties as the following.

  1. Distance: 20 (It is 50 by default)
  2. Move X: 800
  3. Move Y: 400

ani1-step1.png

Step 2 Move

Click the Plus Icon in the Step Section to add Step 2.

Step 2 Properties are set as follows.

  1. Distance: 20 (it is 50 by default)
  2. Sticky On Scroll
  3. Move X: 800
  4. Move Y: 1000
  5. Scale: 300
  6. Transparency: 20
  7. Blur: 10

ani1-step2.png

Test Animation

  1. Preview or publish the project.
  2. Scroll the page to test the Animation.

In this tutorial, you will learn how to move, resize, and blur the Shape Element on the screen. [Download and import the Block with this Animation Example](https://resources.nicepage.com/446/126446/animation-example-1.zip). ### !animation-move-scale.gif! ## Add Block 1. Add a new Block. 2. Increase the Block Height by at least **2000**. 3. Set the Top Margin to **200**. ## Add Elements 1. Add a Circle Shape. 2. Make it red. 3. Resize it if needed. 4. Add and edit the Heading. 5. Add and edit the Text. 6. Align all Elements to the left. ## Set Animation Properties 1. Select the Shape. 2. Go to the Property Panel. 3. Click the **Scroll** in the Animation On section. 4. Choose the **Sync With Scroll** (prior Step-By-Step). 5. Trigger on the **Window Bottom**. ### Step 1 Move Set the Step 1 properties as the following. 1. Distance: **20** (It is 50 by default) 2. Move X: **800** 3. Move Y: **400** ## !ani1-step1.png! ### Step 2 Move Click the **Plus Icon** in the Step Section to add Step 2. Step 2 Properties are set as follows. 1. Distance: **20** (it is 50 by default) 2. **Sticky On Scroll** 3. Move X: **800** 4. Move Y: **1000** 5. Scale: **300** 6. Transparency: **20** 7. Blur: **10** ## !ani1-step2.png! ## Test Animation 1. Preview or publish the project. 2. Scroll the page to test the Animation. ## Related - [Animation Sync With Scroll](page:485289) - [Animation Example 2](page:484924) - [Animation Example 3](page:484922) - [Animation Example 4](page:490188) - [Animation Example 5](page:490194) - [Animation Example 6](page:490195) ##