Adding a Scrollytelling Image

Styling a Scrollytelling Image

Configuration options

Tell it with a Collection of Images

Organizing Scrollytelling Image sections

Scrollytelling is a great way to add a visual flow to your project. After scrolling through the Scrollytelling section, the background fades into that of the subsequent Scrollytelling section. Meanwhile, elements placed inside Scrollytelling sections continue to move in a standard scrolling behavior.

Note: We recommend that you add two or more Scrollytelling Image sections back-to-back to showcase the smooth transition effect, this will allow you to unleash its full potential.

🎑 Adding a Scrollytelling Image

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Scrollytelling Image

  • Select it

  • Hover over the canvas and click where it says Add section here

🎨 Styling a Scrollytelling Image

  • Spacing bottom: Add padding to the bottom of the Scrollytelling Image section in pixels or % to keep spacing between sections

  • Width: The width of a scrollytelling Image section cannot be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content

  • Min H: Sets the minimum amount of height pixels a Scrollytelling Image section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

    • Spacing top: Add padding to the top of the Scrollytelling Image section in pixels or % to keep spacing between sections

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background:

    • Add fill: Add color to the section's background

    • Add gradient: Combine colors to add a gradient as the section's background

    • Add background image: Upload an ****image ****or ****choose an image from one of our ****free stock images libraries to use as the section's background

  • Icons:

    • Set custom shape: Replace the default icons with a shape or a custom SVG

    • Set custom image: Replace the default icons with an image

Aspect Ratio

Specifying and locking the aspect ratio of a Scrollytelling Image section will allow you to adjust and resize it but still maintain the overall relationship between height and width.

Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.

⚙️ Configuration options

Parameter

Description

Duration

Animation time in milliseconds. (350 ms is recommended)

Easing

Select which easing function you want to use for your Animation

Zoom

Toggle to make your Image come slightly to life as it zooms in and out slowly.

🧶 Tell it with a Collection of Images

Add multiple scrollytelling image sections to have a backdrop that progresses to match the tale.

To Create this example:

  • Add a scrollytelling image section, and choose your desired image.

  • Double-click the section to bring up the configuration settings and change to the settings below:

  • Add a text box with a heading and paragraph.

  • Add animation to the text box; select load animation with presets “slide from left” and configure with the below settings:

    • Duration: 1.2 seconds

    • Movement (?): easeOutQuart

    • Opacity: start = 0 / end = 1

    • Move Horizontal: From x = -300, to = 0 for left / From x = 300, to = 0 for right

  • Add your next scrollytelling image section and use the same settings as the above for uniformity and ease of transition across your image sections. The example above is a collection of four scrollytelling image sections.

📚 Organizing Scrollytelling Image Sections

Once a Scrollytelling Image section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.

  • Select the section in the layers panel

  • Click and hold it

  • Drag it above or below the section you want

Related Articles

Adding a Scrollytelling Video Section

Adding a Scrollytelling JWPlayer Section

Adding a Video

Adding Images

Did this answer your question?