isPublished: true title: Building a Scroll-Linked Slideshow with Motion for React description: Let's explore how to use scroll-linked animations in combination with position sticky to create a slideshow with Motion for React. date: '2025-01-30' categories:
- react
- motion for react
- framer motion
Building a Scroll-Linked Slideshow with Motion for React
What We're Building
This article walks through a scroll-linked slideshow demo I made with React and Framer Motion, now known as Motion for React.
Our slideshow consists of a left column of slide content in the normal document flow and a right column with a vertically centered position sticky image viewer.
Our images will animate in and out as the corresponding slide content enters and exits the vertical center of the viewport during scroll.
We'll create an offset for the transition between slides so the entering image fades in before the previous image starts to exit.
We're also going to make an animated counter that shows the active slide number based on what slide most recently crossed the vertical center of the viewport.
Let's jump into it!
Project Setup
This demo is built with NextJS. I'm familiar with Next and like it for small demos and hobby projects.
The project uses Tailwind for styles and includes some basic setup for linting and formatting.
Getting up and running with the demo takes just a couple minutes.
Simply clone the repo and run npm i && npm run dev if you want to explore the full demo.
No worries if you'd like to use the demo code and you're partial to plain ol' React or another framework. The only Next component used in this demo is the <Image> component. You can simply replace this with an <img> tag or component of your choosing.
The relevant code is found in app/page.tsx along with all components inside the app/components folder.
Slides Data
First, let's set up some data to represent our slides.
For each slide, we'll add a title and some content along with our image. Note we varied the content length of a couple slides to ensure our solution takes this into account.
const loremSnippet =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
type Slide = {
id: number
title: string
content: string
image: {
src: StaticImageData
alt: string
}
}
const slides = [
{
id: 0,
title: 'Flowers',
content: loremSnippet,
image: {
src: FlowersPic,
alt: 'flowers'
}
},
{
id: 1,
title: 'Bike',
content: `${loremSnippet} ${loremSnippet}`,
image: {
src: BikePic,
alt: 'bike'
}
},
{
id: 2,
title: 'Coffee',
content: loremSnippet,
image: {
src: CoffeePic,
alt: 'coffee'
}
},
{
id: 3,
title: 'Ferris Wheel',
content: `${loremSnippet} ${loremSnippet}`,
image: {
src: FerrisWheelPic,
alt: 'ferris wheel'
}
},
{
id: 4,
title: 'Bridge',
content: loremSnippet,
image: {
src: BridgePic,
alt: 'bridge'
}
}
]Scaffolding the UI
The demo includes some layout to help us imagine adding our slides to a page inside a typical container with some content above and below. This is useful to illustrate how our position sticky images respond to scrolling to and from the surrounding content.
There are also some reuasable class names we set up since we know we'll need identical container and grid layout styles in and out of the normal document flow in multiple places.
// Some reusable grid and gap styles for our layout.
const gridClasses = 'grid grid-cols-2 gap-16 md:gap-32'
// Some reusable classes for container styles.
const containerClasses = 'mx-auto max-w-6xl px-6 lg:px-8'We'll start with the simple idea that we need to animate each slide image. The image animation is driven by scrolling the content of the that slide.
This means wherever we orchestrate our animation we'll need access to the element showing the slide content as well as the image itself.
It makes sense then to compose our image animation inside of a component with access to that slide's data as well as the elements that use it.
We'll achieve this by mapping over our slides to render a <Slide> component and composing our animation within <Slide>.
We'll ignore some of our layout wrapper and focus on the relevant JSX below to start.
function Home() {
return (
<div className={containerClasses}>
<div className='relative grid'>
{slides.map((slide) => (
<Slide key={slide.id} slide={slide} />
))}
</div>
</div>
)
}We're now going to think about composing our <Slide> component into the main bits of UI we need to access for orchestrating our animation.
The first two are pretty straightforward. We'll add a <ContentSection> to show the content of the slide and an <ImageViewer> component to setup our position sticky UI containing our image.
Let's now consider the varying length of our content sections. Tracking scroll progress of the entire content section gives us a value relative to the length of that content.
Thid could be useful in some scenarios but won't help us achieve the consistent image animations we want between slides.
Instead, we'll add two position absolute elements <SlideTop> and <SlideBottom> as a more fine-tuned way to track scroll during the transition between slides.
We'll use the scroll progress of these elements as a mechanism for creating consistent image transitions from one slide to the next regardless of content length.
type SlideProps = {
slide: SlideType
}
function Slide({ slide }: SlideProps) {
const [scope, animate] = useAnimate()
const topRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)
// TODO: Compose our image animation with Motion
return (
<div>
<div className='relative'>
<SlideTop ref={topRef} />
<SlideBottom ref={bottomRef} />
<ContentSection slide={slide} />
</div>
<div ref={scope}>
<ImageViewer slide={slide} />
</div>
</div>
)
}The next important step is ensuring we have access to the DOM elements relevant to our animation.
You probably noticed we've passed a ref to <SlideTop> and <SlideBottom>. We'll wrap these components in forwardRef to expose relevant DOM elements via topRef and bottomRef to the <Slide> component.
Next, we've assigned a ref to the element wrapping <ImageViewer>. The scope value we assign comes from Motion's useAnimate hook. This establishes a boundary for using Motion's animate function.
Now we can animate any elements within scope. In other words, our image!
Slide Content
Let's start with our <SlideContent> component.
type ContentSectionProps = {
slide: Slide
}
function ContentSection({ slide }: ContentSectionProps) {
return (
<div className={gridClasses}>
<div className='grid gap-y-4'>
<h2 className='pl-6 text-4xl font-bold md:text-7xl'>{slide.title}</h2>
</div>
<p className='pl-6 text-base font-extralight md:text-2xl'>
{slide.content}
</p>
</div>
)
}This component is pretty straightforward. We're just showing the slide title along with its content.
Image Viewer
Now let's take a look at the <ImageViewer> component. Let's start with setting up our right column position sticky container that will contain our image.
type ImageViewerProps = {
slide: Slide
}
function ImageViewer({ slide }: ImageViewerProps) {
return (
<div className='absolute inset-0'>
<div
style={
{
// TODO: Set appropriate top position
}
}
className='sticky'
>
<div className={gridClasses}>
<div
className='relative col-start-2'
style={
{
// TODO: Set appropriate image height
}
}
>
{/* TODO: Image goes here */}
</div>
</div>
</div>
</div>
)
}What we've really got here is just a starting point for the layout containing our image. It will require some additional steps to properly position and style our images with respect to the viewport to achieve our desired effect. We'll cover this in more detail below.
Getting Dimensions with ResizeObserver
We need to account for vertically centering our position sticky container. We can do this by assigning it an appropriate top value.
We'll plan to let our image take up the full width of our column and keep its aspect ratio. This means our image height may change when the window resizes. The top property on our position sticky container therefore needs to be dynamic.
I've used an image aspect ratio of 1:1 to make our math a bit easier. This means we can derive our image height simply by measuring our column width. Then we can use the current height to calcuate an appropriate top value.
The common approach here is a hook relying on ResizeObserver.
You can write your own hook for this or use one from a library like the useResizeObserver hook from usehooks-ts as I've done here.
Using the hook is as simple as assigning a ref and calling the hook to get the width.
const columnRef = useRef<HTMLDivElement>(null)
const { width: imageHeight } = useResizeObserver({
ref: columnRef
})The imageHeight returned from our hook will be undefined until our column dimensions can be measured.
The next question is where to call this hook.
The active slide counter we're going to build later requires the same position sticky setup to stay synced with our slide images. So that'll need our image height.
We also need to consider how our scroll-linked styles should adjust to changes in image height. It turns out that defining our scroll progress as a factor of image height is important if we want our animations to feel proportionate to our image size.
Let's implement useResizeObserver in our top level component and mock one of our grid columns to effectively track our image height.
Then we'll pass our imageHeight value as props to any components that might need it.
function Home() {
const columnRef = useRef<HTMLDivElement>(null)
const { width: imageHeight } = useResizeObserver({
ref: columnRef
})
return (
<>
<div className='absolute inset-0'>
<div className={containerClasses}>
<div className={gridClasses}>
<div ref={columnRef} />
</div>
</div>
</div>
<div className={containerClasses}>
<div className='relative grid'>
{imageHeight && (
<>
{slides.map((slide) => (
<Slide key={slide.id} slide={slide} imageHeight={imageHeight} />
))}
</>
)}
</div>
</div>
</>
)
}We map over our slides and pass imageHeight to our <Slide> component.
<Slide> will then pass it to our <ImageViewer>.
type SlideProps = {
slide: SlideType
imageHeight: number
}
function Slide({ slide, imageHeight }: SlideProps) {
const [scope, animate] = useAnimate()
const topRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)
// TODO: Compose our image animation with Motion
return (
<div>
<div className='relative'>
<SlideTop ref={topRef} />
<SlideBottom ref={bottomRef} />
<ContentSection slide={slide} />
</div>
<div ref={scope}>
<ImageViewer slide={slide} imageHeight={imageHeight} />
</div>
</div>
)
}Since we still need to account for actually displaying our slide image, let's define a new component <StickyImageContainer> that uses our imageHeight to create the necessary layout before wrapping our image.
type StickyImageContainerProps = PropsWithChildren<{
imageHeight: number
}>
function StickyImageContainer({
children,
imageHeight
}: StickyImageContainerProps) {
return (
<div className='absolute inset-0'>
{imageHeight && (
<div
style={{
top: `calc(50svh - ${imageHeight / 2}px)`
}}
className='sticky'
>
<div className={gridClasses}>
<div
className='relative col-start-2'
style={{
height: `${imageHeight}px`
}}
>
{children}
</div>
</div>
</div>
)}
</div>
)
}We've used viewport units to set the top of our position sticky container to 50vh minus half our image height.
I actually swapped vh for svh or small viewport height after some testing on mobile. Check the reference on different viewport units to learn more.
This offset puts the center of our image exactly at the vertical center of the viewport.
Then, we assign a height of imageHeight to the position relative wrapper around our image to ensure it always take up the intended height.
Let's bring it all together and compose <ImageViewer> using the new <StickyImageContainer> and passing it our imageHeight.
type ImageViewerProps = {
slide: Slide
imageHeight: number
}
function ImageViewer({ slide, imageHeight }: ImageViewerProps) {
return (
<StickyImageContainer imageHeight={imageHeight}>
<motion.div
key={slide.id}
className={clsx('h-full rounded-md', `slide-${slide.id}`)}
>
<SlideImage id={slide.id} image={slide.image} />
</motion.div>
</StickyImageContainer>
)
}Note we added a class slide-${slide.id} to identify the slide on the element directly wrapping our image.
We're going to animate this element to effectively fade our image in and out. The scope we assigned earlier in our <Slide> component will allow us to target and animate the element.
We've also introduced our first Motion component. We can now use Motion's APIs to animate this div element.
The <SlideImage> component is responsible for showing the image itself.
I used Next's Image component and added a little loading blur transition. I also sized and cropped our images with a 1:1 aspect ratio.
type SlideImageProps = Pick<Slide, 'id' | 'image'>
function SlideImage({ id, image }: SlideImageProps) {
const [isLoaded, setIsLoaded] = useState<boolean>(false)
return (
<Image
className={cn(
isLoaded ? 'blur-none' : 'blur-lg',
'h-full w-full rounded-md object-cover grayscale-[50%] transition-all duration-200'
)}
priority={id === 0}
width={580}
height={580}
sizes='(max-width: 767px) 360px, 580px'
alt={image.alt}
src={image.src}
placeholder={'blur'}
onLoad={() => setIsLoaded(true)}
/>
)
}Wrapping Up Slide Content
We talked earlier about tracking the scroll progress of <SlideTop> and <SlideBottom> to power our image animations.
We also called out that the height and positioning of these elements should be defined as a factor of the current image height so our scroll-linked styles are always proportionate to our image.
Let's start by passing these components our imageHeight.
type SlideProps = {
slide: SlideType
imageHeight: number
}
function Slide({ slide, imageHeight }: SlideProps) {
const [scope, animate] = useAnimate()
const topRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)
// TODO: Compose our image animation with Motion
return (
<div>
<div className='relative'>
<SlideTop ref={topRef} imageHeight={imageHeight} />
<SlideBottom ref={bottomRef} imageHeight={imageHeight} />
<ContentSection slide={slide} />
</div>
<div ref={scope}>
<ImageViewer slide={slide} imageHeight={imageHeight} />
</div>
</div>
)
}<SlideTop> and <SlideBottom> will be position absolute components that extend above and below the slide content, respectively.
This creates an overlap between the <SlideBottom> of one slide's content and the <SlideTop> of the next.
This intersection results in both components scrolling at the same time.
We can think of adjusting this intersection as a mechanism to control how much our animating images overlap one another during the transition between slides.
Slide Top
Here's what our <SlideTop> looks like.
const SlideTop = forwardRef(function SlideTop(
{ imageHeight }: { imageHeight: number },
ref: ForwardedRef<HTMLDivElement>
) {
return (
<div
ref={ref}
className='absolute'
style={{
height: topAndBottomHeight(imageHeight),
top: 0,
marginTop: `-${topAndBottomNegativeMargin(imageHeight)}px`
}}
/>
)
})The topAndBottomHeight and topAndBottomNegativeMargin are functions that return a value as a factor of image height.
Both <SlideTop> and <SlideBottom> use these values to set their height and offset along the y-axis relative to the slide content itself.
// The height of the `<SlideTop>` and `<SlideBottom>` components.
// This value should be greater than `topAndBottomNegativeMargin` to achieve some overlap between entering and exiting images.
function topAndBottomHeight(imageHeight: number) {
return imageHeight * 0.75
}
// The negative margin used to offset `<SlideTop>` and `<SlideBottom>` components to create the overlap effect.
function topAndBottomNegativeMargin(imageHeight: number) {
return imageHeight * 0.5
}The point here is that changes in the height and position of <SlideTop> and <SlideBottom> impact how we define scroll progress. Changes to how we define scroll progress directly impact our animations.
We're composing our height and margin as a factor of image height to ensure our animated image styles are proportionate to the size of the image.
You can swap in static values or different functional values for height and margin to observe the differences as image height changes if you're curious.
Slide Bottom
<SlideBottom> mirrors <SlideTop> but is positioned with respect to the bottom of the slide content.
const SlideBottom = forwardRef(function SlideBottom(
{ imageHeight }: { imageHeight: number },
ref: ForwardedRef<HTMLDivElement>
) {
return (
<div
ref={ref}
className='absolute'
style={{
height: topAndBottomHeight(imageHeight),
bottom: 0,
marginBottom: `-${topAndBottomNegativeMargin(imageHeight)}px`
}}
/>
)
})Tracking Scroll Progress
Recall that the elements assigned the forwarded ref in <SlideTop> and <SlideBottom> are accessed by our <Slide> component via topRef and bottomRef.
We're going to target these elements with Motion's useScroll hook so we can track their scroll progress.
The useScroll hook returns motion values. We can use those automatically tracked values to directly style the DOM or to compose other motion values to orchestrate our animations.
But how do we define the start and end of scrolling our target element?
We're going to use the offset option and assign 50vh as the start and end of scroll.
This means scrolling starts when our target first touches the center of the viewport and ends when our target last touches it.
// Where relative to the viewport our animation starts and ends.
const animateScrollOffset = '50vh'type SlideProps = {
slide: SlideType
imageHeight: number
}
function Slide({ slide, imageHeight }: SlideProps) {
const [scope, animate] = useAnimate()
const topRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)
const { scrollYProgress: topYProgress } = useScroll({
target: topRef,
offset: [`start ${animateScrollOffset}`, `end ${animateScrollOffset}`]
})
const { scrollYProgress: bottomYProgress } = useScroll({
target: bottomRef,
offset: [`start ${animateScrollOffset}`, `end ${animateScrollOffset}`]
})
return (
<div>
<div className='relative'>
<SlideTop ref={topRef} imageHeight={imageHeight} />
<SlideBottom ref={bottomRef} imageHeight={imageHeight} />
<ContentSection slide={slide} />
</div>
<div ref={scope}>
<ImageViewer slide={slide} imageHeight={imageHeight} />
</div>
</div>
)
}Creating Scroll-Linked Image Styles
We talked earlier about how we can compose motion values from other motion values and then use them to style the DOM. We'll use useTransform to do this.
We're going to take the scroll-linked motion values topYProgress and bottomYProgress and transform them into appropriate style values to animate our image.
Recall that topYProgress and bottomYProgress are motion values between 0 and 1 representing scroll progress of <SlideTop> and <SlideBottom>
useTransform lets us create value mappings to describe mapping one motion value to another.
We'll use this to map both topYProgress and bottomYProgress to new motion values we can use to orchestrate the opacity of our slide image.
Opacity Styles
Let's create our opacity styles. We'll start with topYProgress.
const topOpacity = useTransform(
topYProgress, // the starting motion value we want to transform
[0, 1], // input range of `topYProgress`
slide.id === 0 ? [1, 1] : [0, 1] // output range of `topOpacity`
)The value mapping above describes a new motion value that maps from 0 to 1 as the top of the slide content is scrolled with the exception of the first slide.
The default mapping describes opacity fading in as the user scrolls into the slide's content. The first slide always maps to 1 to ensure the image is visible even when the user is scrolled above the slideshow.
This feels better than showing a completely blank right column as the slideshow first comes into view, right?
The logic for bottomOpacity is the inverse. The new motion value maps from 1 to 0 as the bottom of the slide content is scrolled with the exception of the last slide.
The default mapping describes opacity fading out as the user scrolls out of the slide's content. The last slide always maps to 1 to ensure the final image remains visible after the user finishes scrolling past the end of the slideshow. Same idea here as with the treatment of the first slide in topOpacity.
const bottomOpacity = useTransform(
bottomYProgress, // the starting motion value we want to transform
[0, 1], // input range of `bottomYProgress`
slide.id === slides.length - 1 ? [1, 1] : [1, 0] // output range of `bottomOpacity`
)Next, we can create a unified opacity motion value by taking the min of topOpacity and bottomOpacity.
We can use the get() method any time we need the latest state of a motion value.
const opacity = useTransform(() =>
Math.min(topOpacity.get(), bottomOpacity.get())
)We've composed topOpacity and bottomOpacity to have an inversion relationship with respect to scroll direction. This means one of the values is always 1.
The lower of the two therefore will always indicate which end of the slide is scrolling near the center of the viewport and relevant for the purposes of animating our image.
Scale Styles
We can transform opacity just like we did with scrollYProgress.
This time rather than value mapping we're going simply pass useTransform a function.
The idea here is pretty simple. We're going to scale our image up or down as it fades in or out.
const scale = useTransform(() => Math.min(1, 0.75 + opacity.get() ** 2 * 0.25))Our motion value scale will start at 0.75 and move toward 1. How rapidly scale changes with respect to opacity between those bounds is determined by our formula.
The current formula results in a relatively slow increase in scale as the image first fades into view and a faster increase as the image becomes fully visible.
Transform Styles
We're once again going to use useTransform to create a new motion value x.
We'll use x to animate the translateX value of our image. This will define how our image enters and exits from right or left.
We'll pass useTransform a function just like we did for scale.
One thing I hadn't mentioned yet is that we're going to add some spacing between our slides using a row gap like we would with any other grid layout.
This is important since it redefines the midpoint between any two slide content sections.
It makes sense to account for this in animations related to the transition between slides, particularly the active slide counter we'll build later.
But it's also helpful to factor in the row gap when defining our animated x value if we want our slide images to intersect one another in a relatively consistent manner.
First, let's define our row gap value in JavaScript.
// The gap between each content section.
const sectionRowGap = 24Then we'll make the relevant adjustment to our <Home> component to add the styles to our grid layout wrapping our list of slides.
<div style={{ rowGap: `${sectionRowGap}px` }} className='relative grid'>
{imageHeight && (
<>
{slides.map((slide) => (
<Slide key={slide.id} slide={slide} imageHeight={imageHeight} />
))}
</>
)}
</div>Next, we'll create an xOffset function that is defined by a factor of image height but also discounts the row gap.
export function xOffset(imageHeight: number) {
return imageHeight * 0.5 - sectionRowGap
}Again, you can experiment with composing these values however you like.
Let's now use xOffset to define our new x motion value.
First, we simply need to get the xOffset by calling it and passing the current imageHeight.
This xOffset distance alone just describes the distance from center our image animates between.
Therefore, we can add the equal and opposite distance to bring our image to center. We do this by a factor fo the current opacity so that our image slides as it becomes visible.
We'll also alternate the direction so that even images will always slide to and from the left and odd images to and from the right. This will make it feel a bit like the entering image is gently nudging the exiting image out of the way.
const x = useTransform(
() =>
// The offset distance from center along the x-axis
xOffset(imageHeight) * (slide.id % 2 === 0 ? -1 : 1) +
// Our image moves back to center as opacity approaches 1
opacity.get() * xOffset(imageHeight) * (slide.id % 2 === 0 ? 1 : -1)
)Animating With Motion
Okay, we've finished setting up our motion values and they're ready to use.
We're going to do one more step before adding our animations.
We'll track the scroll of the page. We're doing this so we can subscribe to any changes in scroll with a callback that will animate our image styles.
const { scrollYProgress } = useScroll()We'll use Motion's animate function from useAnimate to style the .slide-${slide.id} class we added earlier to the element inside <ImageViewer> we're using to animate our image.
useEffect(() => {
const unSubScroll = scrollProgress.on('change', () => {
animate(
`.slide-${slide.id}`,
{
opacity: opacity.get(),
x: x.get(),
scale: scale.get()
},
{
duration: 0
}
)
})
return () => {
unSubScroll()
}
})Our useEffect doesn't require dependencies because we're using Motion's DOM Renderer and not working within the React render cycle here.
animate takes the element we want to animate, animation settings, and transition settings.
All we need to do for our animation settings is assign the latest state of our motion values to the corresponding motion style properties.
Our element is going to animate anytime we scroll and the state of one of our motion values changes. So, it'd be a bit overkill to add a transition to every single one of those animations.
We've specified duration: 0 in our transition settings to override the default and ensure our animations are driven purely by scroll.
Okay, our image animation is now working!
You might've been surprised how easy the last step felt.
Most of the hard work was composing our motion values.
Let's take a final look at our updated <Slide> component to highlight the changes we made to both compose our motion values and use them to animate our image.
type SlideProps = {
slide: SlideType
imageHeight: number
}
function Slide({ slide, imageHeight }: SlideProps) {
const [scope, animate] = useAnimate()
const topRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll()
const { scrollYProgress: topYProgress } = useScroll({
target: topRef,
offset: [`start ${animateScrollOffset}`, `end ${animateScrollOffset}`]
})
const { scrollYProgress: bottomYProgress } = useScroll({
target: bottomRef,
offset: [`start ${animateScrollOffset}`, `end ${animateScrollOffset}`]
})
const topOpacity = useTransform(
topYProgress,
[0, 1],
slide.id === 0 ? [1, 1] : [0, 1]
)
const bottomOpacity = useTransform(
bottomYProgress,
[0, 1],
slide.id === slides.length - 1 ? [1, 1] : [1, 0]
)
const opacity = useTransform(() =>
Math.min(topOpacity.get(), bottomOpacity.get())
)
const scale = useTransform(() =>
Math.min(1, 0.75 + opacity.get() ** 2 * 0.25)
)
const x = useTransform(
() =>
xOffset(imageHeight) * (slide.id % 2 === 0 ? -1 : 1) +
opacity.get() * xOffset(imageHeight) * (slide.id % 2 === 0 ? 1 : -1)
)
useEffect(() => {
const unSubScroll = scrollYProgress.on('change', () => {
animate(
`.slide-${slide.id}`,
{
opacity: opacity.get(),
x: x.get(),
scale: scale.get()
},
{
duration: 0
}
)
})
return () => {
unSubScroll()
}
})
return (
<div>
<div className='relative'>
<SlideTop ref={topRef} imageHeight={imageHeight} />
<SlideBottom ref={bottomRef} imageHeight={imageHeight} />
<ContentSection slide={slide} />
</div>
<div ref={scope}>
<ImageViewer slide={slide} imageHeight={imageHeight} />
</div>
</div>
)
}Building the Active Slide Counter
We'll now tackle building the active slide counter for this demo.
We'll be using an animated counter-like effect to display the currently active slide.
The row gap we introduced between our slide content sections provides a logical transition between slides.
We'll determine when the center of the row gap crosses the vertical center of the viewport to indicate a new slide becoming active.
First, we'll calculate a new offset of <SlideTop> or <SlideBottom> with respect to the row gap center. This will take the topAndBottomNegativeMargin we already defined and subtract half the distance of the row gap.
Our new offset divided by the total height of <SlideTop> or <SlideBottom> gives us the proportional distance we must scroll <SlideTop> or <SlideBottom> until the center of the row gap crosses the center of the viewport.
// An adjusted `y` offset of `<SlideTop>` and `<SlideBottom>` that accounts for the row gap between slide content sections.
function topAndBottomYOffset(imageHeight: number) {
return topAndBottomNegativeMargin(imageHeight) - sectionRowGap / 2
}
// The calculated scroll progress of `<SlideTop>` or `<SlideBottom>` at which the row gap center between slides is scrolled to the center of the viewport.
export function activeSlideProgressValue(imageHeight: number) {
return topAndBottomYOffset(imageHeight) / topAndBottomHeight(imageHeight)
}We can then use this value to determine the active slide for our animated slide counter.
Active Slide State
We're going to need to keep track of our active slide. Let's use React state for this.
We'll set this up in our <Home> component.
const [activeSlideID, setActiveSlideID] = useState<number | null>(null)We'll also explicily set up a handler we can pass to our <Slide> component and call whenever we need to update the activeSlideID.
const handleSetActiveSlideID = (id: number) => {
setActiveSlideID(id)
}Next, we'll create a new <SlideCounter> component and pass it the activeSlideID to display.
Recall that we still need to set up our <SlideCounter> inside our position sticky container to keep it aligned with our image. So it needs imageHeight as well.
<div style={{ rowGap: `${sectionRowGap}px` }} className='relative grid'>
{imageHeight && (
<>
{slides.map((slide) => (
<Slide
key={slide.id}
slide={slide}
imageHeight={imageHeight}
handleSetActiveSlideID={handleSetActiveSlideID}
/>
))}
</>
)}
{imageHeight && (
<SlideCounter activeSlideID={activeSlideID} imageHeight={imageHeight} />
)}
</div>Your might notice our activeSlideID is initialized as null.
There are some extra bits in the demo to handle what happens on a page refresh if scroll isn't restored to the top of the page. We can't just initialize the first slide in that scenario. Instead, we need to check what content sections are currently in view before setting an appropriate activeSlideID.
You can explore the demo to learn more but for the purposes of the walkthrough we'll focus on handling updating the active slide on scroll.
Updating the Active Slide
Okay, we've already defined activeSlideProgressValue as way to determine when a slide becomes active based on scroll progress.
We've also previously set up our opacity motion value to map directly to scroll progress to fade our image in or out.
Now we just need to check when the opacity is greater than activeSlideProgressValue to determine when our slides cross one another and the opacity of one slide surpasses another.
We'll simply add this in our <Slide> component to handle updating the active slide while subscribed to any change in scroll.
const unSubScroll = scrollYProgress.on('change', () => {
if (opacity.get() >= activeSlideProgressValue(imageHeight)) {
handleSetActiveSlideID(slide.id)
}
animate(
`.slide-${slide.id}`,
{
opacity: opacity.get(),
x: x.get(),
scale: scale.get()
},
{
duration: 0
}
)
})Slide Counter
Now that we're updating the active slide number, let's build the <SlideCounter> component to display it.
We've established we need to reuse our <StickyImageContainer> layout. This way our counter will always be positioned alongside our images.
We'll add a container to hold our active slide number. The classes used below offset our grid column gap to position our active slide container in the center of the viewport.
type SlideCounterProps = {
activeSlideID: number | null
imageHeight: number
}
export default function SlideCounter({
activeSlideID,
imageHeight
}: SlideCounterProps) {
return (
<StickyImageContainer imageHeight={imageHeight}>
<div className='absolute -left-12 bottom-0 top-0 flex items-center md:-left-20'>
<div className='flex h-8 w-8 items-center justify-center overflow-hidden rounded-[4px]'>
{/* TODO: Show the active slide number here */}
</div>
</div>
</StickyImageContainer>
)
}Before we start composing our animations, let's think about what else we'll need for a nice animated counter-like effect.
What direction should our numbers slide in or out from?
It'd be nice to compose this with respect to the current scroll direction since it feels more natural for the new slide number to enter from the opposing direction. We'll exit the previously active number in the same direction as the new number so the animation feels cohesive.
We'll use scrollYProgress from useScroll and then respond to changes in scroll with useMotionValueEvent so we can calculate the current direction. You can check out this little interactive example of tracking scroll progress for more explanation.
export default function SlideCounter({
activeSlideID,
imageHeight
}: SlideCounterProps) {
const { scrollYProgress } = useScroll()
const [scrollDirection, setScrollDirection] = useState(1)
useMotionValueEvent(scrollYProgress, 'change', (current) => {
const prev = scrollYProgress.getPrevious()
if (!prev) retur
// Check the diff between current and and previous scroll to get direction.
setScrollDirection(current - prev > 0 ? 1 : -1)
})
return (
<StickyImageContainer imageHeight={imageHeight}>
<div className='absolute -left-12 bottom-0 top-0 flex items-center md:-left-20'>
<div className='flex h-8 w-8 items-center justify-center overflow-hidden rounded-[4px]'>
{/* TODO: Show the active slide number here */}
</div>
</div>
</StickyImageContainer>
)
}Animating Background Color
We're going to animate the background color of our counter container as well as the slide number itself.
Let's define some colors for each slide.
const colors = ['#6282a6', '#7e6e84', '#72665e', '#b87a5e', '#ebbd74']Now let's change our current container element into a motion component and compose our animation for the background color.
export default function SlideCounter({
activeSlideID,
imageHeight
}: SlideCounterProps) {
const { scrollYProgress } = useScroll()
const [scrollDirection, setScrollDirection] = useState(1)
useMotionValueEvent(scrollYProgress, 'change', (current) => {
const prev = scrollYProgress.getPrevious()
if (!prev) retur
// Check the diff between current and and previous scroll to get direction.
setScrollDirection(current - prev > 0 ? 1 : -1)
})
if (activeSlideID === null) return null
return (
<StickyImageContainer imageHeight={imageHeight}>
<div className='absolute -left-12 bottom-0 top-0 flex items-center md:-left-20'>
<motion.div
custom={{
id: activeSlideID
}}
initial='initial'
animate={'active'}
transition={baseTransition}
variants={activeNumberBackgroundVariants}
className='flex h-8 w-8 items-center justify-center overflow-hidden rounded-[4px]'
>
{/* TODO: Show the active slide number here */}
</motion.div>
</div>
</StickyImageContainer>
)
}You probably noticed we're passing a bunch of props to our motion component. Rather than use the animate function, we're going to compose this animation with motion props.
We're going to rely on the custom prop to pass in the activeSlideID. We can then define variants that take our custom value as an argument.
We're passing in activeSlideID as an argument so we can animate the background with the corresponding color from our colors array.
We'll define an initial state along with an active variant to define how our element should animate.
const activeNumberBackgroundVariants = {
initial: {
backgroundColor: '#ffffff',
opacity: 0
},
active: ({ id }: { id: number }) => ({
backgroundColor: colors[id],
opacity: 0.7
})
}Our baseTransition is a simple easing function with a duration.
const baseEase = [0.72, 0.32, 0, 1]
const baseTransition = {
duration: 0.7,
ease: baseEase
}Animating Active Slide Number
We're aiming for a counter-like effect. Previous number exits. New number enters.
We're going to animate our slide numbers in and out of the counter using Motion's <AnimatePresence> component. This allows us to add and remove components from the React tree while animating them as they enter and exit.
One neat trick with <AnimatePresence> is that we can take advantage of the role of the key prop in React's reconciliation process.
We can define a single motion component and provide the activeSlideID value as the key.
Every time activeSlideID changes, the component using the previous key will be removed and a new component will enter to replace it.
We'll once again use motion props to compose our animations. Only this time we'll add an exit variant that describes the animated state of the exiting component.
export default function SlideCounter({
activeSlideID,
imageHeight
}: SlideCounterProps) {
const { scrollYProgress } = useScroll()
const [scrollDirection, setScrollDirection] = useState(1)
useMotionValueEvent(scrollYProgress, 'change', (current) => {
const prev = scrollYProgress.getPrevious()
if (!prev) retur
// Check the diff between current and and previous scroll to get direction.
setScrollDirection(current - prev > 0 ? 1 : -1)
})
if (activeSlideID === null) return null
return (
<StickyImageContainer imageHeight={imageHeight}>
<div className='absolute -left-12 bottom-0 top-0 flex items-center md:-left-20'>
<motion.div
custom={{
id: activeSlideID
}}
initial='initial'
animate={'active'}
transition={baseTransition}
variants={activeNumberBackgroundVariants}
className='flex h-8 w-8 items-center justify-center overflow-hidden rounded-[4px]'
>
<AnimatePresence>
<motion.div
key={activeSlideID}
custom={{ direction: scrollDirection }}
initial='initial'
animate={'active'}
exit='exit'
variants={activeNumberVariants}
transition={activeNumberTransition}
className='absolute text-white'
>
{activeSlideID + 1}
</motion.div>
</AnimatePresence>
</motion.div>
</div>
</StickyImageContainer>
)
}We're using the custom motion prop just like we did earlier. But this time we're passing scrollDirection as an argument.
We'll use scrollDirection to slide the entering or exiting number up or down in the opposite direction of scroll.
const heightOffset = 40
const activeNumberVariants = {
initial: ({ direction }: { direction: number }) => ({
opacity: 0,
y: direction * heightOffset
}),
active: {
opacity: 0.9,
y: 0
},
exit: ({ direction }: { direction: number }) => ({
opacity: 0,
y: direction * heightOffset * -1
})
}This wraps up the animation for our active slide counter. Now, anytime we transition between slides the counter background color animates along with the current and previous slide numbers.
Staggered Title Animation
The finished demo includes a staggered animation that runs next to the slide content title when our activeSlideID changes.
We won't go over this one in detail but you can definitely explore the demo code if you're curious how this works.
The basic approach is similar. It involves using motion props along with a bit of math and some transition settings from Motion like staggerChildren for orchestration.
Wrapping Up
Okay, we've covered quite a bit.
Give me a shout if you found this demo useful or have any feedback.
Thanks for reading!