Learn how to overlap images, create a silhouette mask, applying zoom and blur to an image on a background.

Download and import the Block with this Animation Example

animaiton-sync-example-1.gif

Add Block

  1. Add a new Block.
  2. Increase the Block Height by at least 3500.

Add Images

  1. Press ALT+I and add Image 1 as a Background.
  2. Press ALT+I and add Image 2 for a transparent silhouette mask.
  3. Expand Image 1 to three sides.
  4. Overlap Image 2 over Image 1.
  5. Expand Image 2 to three sides.

Download the Images for this example

expand-images.png

Add Box With Elements

  1. Add the Box Element by pressing ALT+P or from the Add Panel.
  2. Align the Box to the center of the Images
  3. Press ALT+2 and ALT+B to add the Heading 2 and Button Elements.
  4. Edit Heading and Button texts.
  5. Make the Heading white and Bold, choosing any font you like.
  6. You can make the Button white and bordered, for example.

add-box-texts.png

Set Animation Properties

Set the Animation on scroll properties for the Elements as follows. For convenience, switch to the outline to select Element more easily.

switch-outline.png

Image 1 Animation

  1. Select Image 1 in the Outline.
  2. Click the On Scroll link in the Animation section of the Property Panel.
  3. Choose the Sync With Scroll Animation.
  4. Trigger on Window Bottom.

image-1-animation.png

Step 1

Add Step 1 with the following properties.

  1. Distance: 0
  2. Make the Image Fixed.
  3. Scale: 90
  4. Blur: 10

Step 2

Add Step 2 with the following properties.

  1. Distance: 50
  2. Keep the Image Fixed.
  3. Scale: 100
  4. Blur: 0

Step 3

Add Step 3 with the following properties.

  1. Distance: 50
  2. Keep the Image Fixed.
  3. Scale: 100
  4. Transparency: 100

Image 2 Animation

  1. Select Image 2 in the Outline.

    1. Click the On Scroll link in the Animation section of the Property Panel.
    2. Choose the Sync With Scroll Animation.
    3. Trigger on Window Bottom.

Step 1

Add Step 1 with the following properties.

  1. Distance: 0
  2. Make the Image Fixed.
  3. Scale: 100

Step 2

Add Step 2 with the following properties.

  1. Distance: 50
  2. Keep the Image Fixed.
  3. Scale: 130

Step 3

Add Step 3 with the following properties.

  1. Distance: 50
  2. Keep the Image Fixed.
  3. Scale: 130

Box Animation

  1. Select the Box Element the Outline.

    1. Click the On Scroll link in the Animation section of the Property Panel.
    2. Choose the Sync With Scroll Animation.
    3. Trigger on Window Bottom.

box-animation.png

Step 1

Add Step 1 with the following properties.

  1. Distance: 0
  2. Make the Box Fixed.
  3. Move Y: 500
  4. Scale: 70
  5. Transparency: 100

Step 2

Add Step 2 with the following properties.

  1. Distance: 50
  2. Make the Box Fixed.
  3. Move: --
  4. Scale: 130

Step 3

Add Step 3 with the following properties.

  1. Distance: 100
  2. Keep the Box Fixed.
  3. Move Y: -500
  4. Scale: 130
  5. Transparency: 100

Test Animation

  1. Preview or publish the page.
  2. Scroll the page and test the Animation.

Learn how to overlap images, create a silhouette mask, applying zoom and blur to an image on a background. [Download and import the Block with this Animation Example](https://resources.nicepage.com/482/126482/animation-example-4.zip) ### !animaiton-sync-example-1.gif! ## Add Block ### 1. Add a new Block. 2. Increase the Block Height by at least **3500**. ## ## Add Images ### 1. Press **ALT+I** and add Image 1 as a Background. 2. Press **ALT+I** and add Image 2 for a transparent silhouette mask. 3. Expand Image 1 to three sides. 4. Overlap Image 2 over Image 1. 5. Expand Image 2 to three sides. ### [Download the Images for this example](https://resources.nicepage.com/466/126466/animation-4-images.zip) ### !expand-images.png! ## Add Box With Elements ### 1. Add the Box Element by pressing **ALT+P** or from the Add Panel. 2. Align the Box to the center of the Images 3. Press **ALT+2** and **ALT+B** to add the Heading 2 and Button Elements. 4. Edit Heading and Button texts. 5. Make the Heading white and Bold, choosing any font you like. 6. You can make the Button white and bordered, for example. ### !add-box-texts.png! ## Set Animation Properties Set the Animation on scroll properties for the Elements as follows. For convenience, switch to the outline to select Element more easily. !switch-outline.png! ### Image 1 Animation ### 1. Select **Image 1** in the Outline. 2. Click the **On Scroll** link in the Animation section of the Property Panel. 3. Choose the **Sync With Scroll** Animation. 4. Trigger on **Window Bottom**. ### !image-1-animation.png! #### Step 1 Add **Step 1** with the following properties. 1. Distance: **0** 2. Make the Image **Fixed**. 3. Scale: **90** 4. Blur: **10** #### Step 2 Add **Step 2** with the following properties. 1. Distance: **50** 2. Keep the Image **Fixed**. 3. Scale: **100** 4. Blur: **0** #### Step 3 Add **Step 3** with the following properties. 1. Distance: **50** 2. Keep the Image **Fixed**. 3. Scale: **100** 4. Transparency: **100** ### Image 2 Animation ### 1. Select **Image 2** in the Outline. 2. Click the **On Scroll** link in the Animation section of the Property Panel. 3. Choose the **Sync With Scroll** Animation. 4. Trigger on **Window Bottom**. #### Step 1 Add **Step 1** with the following properties. 1. Distance: **0** 2. Make the Image **Fixed**. 3. Scale: **100** #### Step 2 Add **Step 2** with the following properties. 1. Distance: **50** 2. Keep the Image **Fixed**. 3. Scale: **130** #### Step 3 Add **Step 3** with the following properties. 1. Distance: **50** 2. Keep the Image **Fixed**. 3. Scale: **130** ### Box Animation ### 1. Select the **Box** Element the Outline. 2. Click the **On Scroll** link in the Animation section of the Property Panel. 3. Choose the **Sync With Scroll** Animation. 4. Trigger on **Window Bottom**. ### !box-animation.png! #### Step 1 Add **Step 1** with the following properties. 1. Distance: **0** 2. Make the Box **Fixed**. 3. Move Y: **500** 4. Scale: **70** 5. Transparency: **100** #### Step 2 Add **Step 2** with the following properties. 1. Distance: **50** 3. Make the Box **Fixed**. 2. Move: **--** 4. Scale: **130** #### Step 3 Add **Step 3** with the following properties. 1. Distance: **100** 2. Keep the Box **Fixed**. 3. Move Y: **-500** 4. Scale: **130** 5. Transparency: **100** ## Test Animation 1. Preview or publish the page. 2. Scroll the page and test the Animation. ## Related - [Animation Sync With Scroll](page:485289) - [Animation Example 1](page:484921) - [Animation Example 2](page:484924) - [Animation Example 3](page:484922) - [Animation Example 5](page:490194) - [Animation Example 6](page:490195) ##