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.