Scroll Show - scrollable slide show
Use this scrollable slideshow template to tell your story with a series of full screen slides animated with Scroll Scenes and custom Show animations.
How it works
body element contains sections that represent slides. Each
section contains a
div.slide-content that is centered in the middle of the section.
Snapping to slides
body has the main Scroll Scene interaction that is used to snap slides in place when scrolling. Explore the Snapping section of the Scroll Scene to see how that is done.
Animating the content when the slide comes into view
has its own Scroll Scene that starts from the moment the slide top enters the view and ends when the slide completely exits the view.
The animation on the scroll scene plays the Show animation on the slide and uses the Play only once property to ensure that the animation is played only once.
The Show animation is defined with the Interactions action on the first
section.slide. The target of the interaction is the
div.slide-content. The animation reveals the content of the slide.
Note that the element with the Scroll Scene itself should not have its position or size animated because that would interfere with the Scroll Scene.
Hiding the content when the slide goes out of view
We could also define the Hide animation if we wanted to hide the content when the slide goes out of view. The slide Scroll Scene animation is playing Hide at the end of the animation. If Hide is not defined, it will simply be ignored.
The Hide animation is not defined in this project.
Reusing the animation on all slides
We use Apply to Many on the first
section.slide to copy the Scroll Scene and Interactions action to all slides on the page.
Overriding default animations
On the second
we use the Interactions action to override the default Show animation. Apply to Many doesn't copy the interaction if another interaction with the same name is already defined on the target element.
Hiding elements when page loads
All elements that should be hidden when the page loads have the Hide at start animation.
How to customize the project
The project is designed so that you can easily customize it:
To add slides duplicate the second or the third slide. Do not duplicate the first slide because it contains shared Scroll Scene and Interactions actions.
Change slide background
section.slide element and use the Properties panel or the Style panel to change the appearance of all slides or just that individual slide.
Change slide content
Edit the content of
div.slide-content in whatever way you wish.
Change the Show animation for all slides
Select the first
and edit its Show animation. Select a different predefined animation or click on the Edit animation to create a custom animation in the Timeline editor. There use the Add timeline button to animate individual content elements.
Define a different Show animation on individual slides
Apply to Many will not copy the animation if it is already defined on the element. So, to create a different Show animation for a slide, we add Interactions action to the
scene.slide element and there define a custom Show animation. Take a look at the second
element to see how it is done.