You can split an image into pieces, animate its assembly, and continue the Animation with the sliding text.

Download and import the Block with this Animation Example

animaiton-sync-example-2.gif

Add Block

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

Add Images

  1. Find an image that you would like to animate assembling.
  2. Split it into 6 equal pieces.
  3. Drag or add those 6 images, parts of the whole image, to the Block.
  4. Join image parts, snapping them by one with the Magnetic Guides.
  5. Align Images centering horizontally.
  6. Make the Top Margin of the Block 100.

You can use the following zip with split images in this example.

Download the images used in this example

join-images.png

Add Texts.

  1. Press the ALT+2 to add Heading 2.
  2. Edit the Text and stylize the Heading 2.
  3. Press the ALT+3 to add Heading 3.
  4. Edit the Text and stylize the Heading 3.
  5. Drag the texts over the Images.
  6. Align with the Magnetic Guides, or as you think it is right.

align-texts.png

Set Animation Properties

Set the following properties for the Elements. All Elements have Animation On Scroll->Sync With Scroll. It is triggered on the Window Bottom.

Image Part 1 Animation

Please note that Image Parts have the Animation of 3 steps and the same settings for Steps 2 and 3. Switch to the Outline in the Page Navigator, and you can also rename the Image Parts for convenience.

  1. Select Image Part 1 in the Outline.
  2. Go to the Property Panel.
  3. Select Animation -> On Scroll -> Sync On Scroll

Step 1

Add Step 1 with the following settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: -900
  4. Move Y: -200
  5. Rotate: 130

image-part1-step-1.png

Step 2

Add Step 2 with the following settings.

  1. Distance: 100
  2. Sticky/Fixed: Fixed
  3. Move X: -
  4. Move Y: -
  5. Rotate: 0

image-part1-step-2.png

Step 3

Add Step 3 with the same settings.

image-part1-step-3.png

Copy / Paste Animation

Copy the Animation of the Image Part 1, and paste it to all other 5 Image Parts.

paste-animation.png

Edit Step 1 For Other Parts

IMPORTANT! Animation Steps 2 and 3 should be identical for all Image Parts.

Image Part 2 - Animation Step 1

Select Image Part 2 in the Outline, and modify the Animation settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: -100
  4. Move Y: -900
  5. Rotate: 130

Image Part 3 - Animation Step 1

Select Image Part 3 in the Outline, and modify the Animation settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: 1200
  4. Move Y: -200
  5. Rotate: 30

Image Part 4 - Animation Step 1

Select Image Part 4 in the Outline, and modify the Animation settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: -900
  4. Move Y: 200
  5. Rotate: 60

Image Part 5 - Animation Step 1

Select Image Part 5 in the Outline, and modify the Animation settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: -
  4. Move Y: 900
  5. Rotate: 130

Image Part 6 - Animation Step 1

Select Image Part 6 in the Outline, and modify the Animation settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: 1200
  4. Move Y: 300
  5. Rotate: 60

Heading 2 Animation

Select Heading 2 in the Outline, and modify the Animation settings.

  1. Go to the Property Panel.
  2. Select Animation -> On Scroll -> Sync On Scroll

Step 1

Add Step 1 with the following settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: 2500
  4. Move Y: -
  5. Scale: 30
  6. Transparency: 100

heading-2-step-1.png

Step 2

Add Step 2 with the following settings.

  1. Distance: 120
  2. Sticky/Fixed: Fixed
  3. Move X: -
  4. Move Y: -
  5. Scale: 100
  6. Transparency: 0

heading-2-step-2.png

Step 3

Add Step 3 with the same settings as Step 2 and change the Distance to 80.

Heading 3 Animation

Select Heading 3 in the Outline, and modify the Animation settings.

  1. Go to the Property Panel.
  2. Select Animation -> On Scroll -> Sync On Scroll

Step 1

Add Step 1 with the following settings.

  1. Distance: 0
  2. Sticky/Fixed: None
  3. Move X: 5000
  4. Move Y: -
  5. Scale: 30
  6. Transparency: 100

Step 2

Add Step 2 with the following settings.

  1. Distance: 150
  2. Sticky/Fixed: Fixed
  3. Move X: -
  4. Move Y: -
  5. Scale: 100
  6. Transparency: 0

Step 3

Add Step 3 with the same settings as Step 2 and change the Distance to 50.

Test Animation

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