Animation
Image Grid Scroll Animation in Framer
This is an image grid scroll animation recreated in Framer from the eBay Playbook website. The coolest part? I didn’t need any code to make it work — it’s completely no-code. Remix the project to see how this type of animation is built in Framer.
About the resource
To achieve these scroll animations in Framer, the key features are sticky positioning, scroll transforms, and scroll sections. To create an image grid scroll animation, place a sticky-positioned frame that stays fixed in the viewport as you scroll down the page. The animation happens inside this frame.
Within the sticky frame, I created an image grid and applied a scroll transform effect to all the images using the “on scroll” trigger. The “To” state of the images was already set, so all I had to do was add the offset values in the “From” state. I also adjusted the scale and opacity values.
About the resource
To achieve these scroll animations in Framer, the key features are sticky positioning, scroll transforms, and scroll sections. To create an image grid scroll animation, place a sticky-positioned frame that stays fixed in the viewport as you scroll down the page. The animation happens inside this frame.
Within the sticky frame, I created an image grid and applied a scroll transform effect to all the images using the “on scroll” trigger. The “To” state of the images was already set, so all I had to do was add the offset values in the “From” state. I also adjusted the scale and opacity values.
About the resource
To achieve these scroll animations in Framer, the key features are sticky positioning, scroll transforms, and scroll sections. To create an image grid scroll animation, place a sticky-positioned frame that stays fixed in the viewport as you scroll down the page. The animation happens inside this frame.
Within the sticky frame, I created an image grid and applied a scroll transform effect to all the images using the “on scroll” trigger. The “To” state of the images was already set, so all I had to do was add the offset values in the “From” state. I also adjusted the scale and opacity values.
The "From" state values of an image in a scroll transform effect.
The "From" state values of an image in a scroll transform effect.
The "From" state values of an image in a scroll transform effect.
Then, I used a trigger frame to apply scroll transforms to the elements within the sticky frame. As the sticky frame remains centered, the hidden trigger frames scroll by. I also used the smooth scroll component for a seamless scroll experience.
Then, I used a trigger frame to apply scroll transforms to the elements within the sticky frame. As the sticky frame remains centered, the hidden trigger frames scroll by. I also used the smooth scroll component for a seamless scroll experience.
Then, I used a trigger frame to apply scroll transforms to the elements within the sticky frame. As the sticky frame remains centered, the hidden trigger frames scroll by. I also used the smooth scroll component for a seamless scroll experience.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
