This tutorial will teach you how to use pages to create a carousel scroll.

More specifically, we’ll use the Horizontal “Page” feature to create a three-page scrollable carousel. Then, we’ll use drivers to change the opacity properties of the three dots at the bottom of the screen (aka carousel indicators, which indicate how many pages are in the carousel as well as which page you are on) based on the Scroll X property of the carousel.

A little bit of information about drivers: Drivers connect properties to each other using keyframes and work within artboards rather than between them. Drivers are similar to an animation timeline, except they work based on a property rather than time. As already mentioned, in this particular example, we’ll base the carousel indicator opacity changes on the Scroll X property of the carousel.

Download the assets.

Download the Principle file.

___

Download the subtitles for this tutorial (.srt file).