You can split an image into pieces, animate Animationbly, and continue the Animation with the sliding text.
Download and import the Block with this Animation Example
Add Block
- Add a new Block.
- Increase the Block Height by at least 3500.
Add Images
- Find an image that you would like to animate assembling.
- Split it into 6 equal pieces.
- Drag or add those 6 images, parts of the whole image, to the Block.
- Join image parts, snapping them by one with the Magnetic Guides.
- Align Images centering horizontally.
- 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
Add Texts.
- Press the ALT+2 to add Heading 2.
- Edit the Text and stylize the Heading 2.
- Press the ALT+3 to add Heading 3.
- Edit the Text and stylize the Heading 3.
- Drag the texts over the Images.
- Align with the Magnetic Guides, or as you think it is right.
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.
- Select Image Part 1 in the Outline.
- Go to the Property Panel.
- Select Animation -> On Scroll -> Sync On Scroll
Step 1
Add Step 1 with the following settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: -900
- Move Y: -200
- Rotate: 130
Step 2
Add Step 2 with the following settings.
- Distance: 100
- Sticky/Fixed: Fixed
- Move X: -
- Move Y: -
- Rotate: 0
Step 3
Add Step 3 with the same settings.
Copy / Paste Animation
Copy the Animation of the Image Part 1, and paste it to all other 5 Image Parts.
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.
- Distance: 0
- Sticky/Fixed: None
- Move X: -100
- Move Y: -900
- Rotate: 130
Image Part 3 - Animation Step 1
Select Image Part 3 in the Outline, and modify the Animation settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: 1200
- Move Y: -200
- Rotate: 30
Image Part 4 - Animation Step 1
Select Image Part 4 in the Outline, and modify the Animation settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: -900
- Move Y: 200
- Rotate: 60
Image Part 5 - Animation Step 1
Select Image Part 5 in the Outline, and modify the Animation settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: -
- Move Y: 900
- Rotate: 130
Image Part 6 - Animation Step 1
Select Image Part 6 in the Outline, and modify the Animation settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: 1200
- Move Y: 300
- Rotate: 60
Heading 2 Animation
Select Heading 2 in the Outline, and modify the Animation settings.
- Go to the Property Panel.
- Select Animation -> On Scroll -> Sync On Scroll
Step 1
Add Step 1 with the following settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: 2500
- Move Y: -
- Scale: 30
- Transparency: 100
Step 2
Add Step 2 with the following settings.
- Distance: 120
- Sticky/Fixed: Fixed
- Move X: -
- Move Y: -
- Scale: 100
- Transparency: 0
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.
- Go to the Property Panel.
- Select Animation -> On Scroll -> Sync On Scroll
Step 1
Add Step 1 with the following settings.
- Distance: 0
- Sticky/Fixed: None
- Move X: 5000
- Move Y: -
- Scale: 30
- Transparency: 100
Step 2
Add Step 2 with the following settings.
- Distance: 150
- Sticky/Fixed: Fixed
- Move X: -
- Move Y: -
- Scale: 100
- Transparency: 0
Step 3
Add Step 3 with the same settings as Step 2 and change the Distance to 50.
Test Animation
- Preview or publish the page.
- Scroll the page up and down and test the Animation.
Related
You can split an image into pieces, animate Animationbly, and continue the Animation with the sliding text.
[Download and import the Block with this Animation Example](https://resources.nicepage.com/557/126557/animation-example-5.zip)
###
!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](https://resources.nicepage.com/550/126550/animation-5-images.zip)
###
!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.
## Related
- [Animation Sync With Scroll](page:485289)
- [Animation Example 1](page:484921)
- [Animation Example 2](page:484924)
- [Animation Example 3](page:484922)
- [Animation Example 4](page:490188)
- [Animation Example 6](page:490195)
##