Animation
3D Image Scroll Gallery in Framer
This is a 3D image scroll gallery in Framer recreated from Luis and Willie originals’s work. Remix the project and see how advanced 3D scroll animation can be built in Framer without any code.
Created by
About the resource
To create this animation, place 4 images inside a wrapper and nest it within a sticky frame. Set the sticky frame in 3D space by adding perspective and enabling preserve-3D on it and all layers inside.
Rotate each image 90° on the Y axis with the origin at x: 50, y: 0. Rotate the images wrap by 180° on the Y axis, then wrap it once more and rotate the outer wrapper 90° on the Y axis and -12° on the X axis.
Next, add a scroll transform to the images wrap with an X offset ( -1000) so the images move towards us. On the images themselves, apply another scroll transform to rotate on the Z axis along with an additional X offset.
Finally, set up the scroll triggers so the zoom effect from the wrap flows into the individual rotations. Add transitions to both scroll transforms for a smooth result.
About the resource
To create this animation, place 4 images inside a wrapper and nest it within a sticky frame. Set the sticky frame in 3D space by adding perspective and enabling preserve-3D on it and all layers inside.
Rotate each image 90° on the Y axis with the origin at x: 50, y: 0. Rotate the images wrap by 180° on the Y axis, then wrap it once more and rotate the outer wrapper 90° on the Y axis and -12° on the X axis.
Next, add a scroll transform to the images wrap with an X offset ( -1000) so the images move towards us. On the images themselves, apply another scroll transform to rotate on the Z axis along with an additional X offset.
Finally, set up the scroll triggers so the zoom effect from the wrap flows into the individual rotations. Add transitions to both scroll transforms for a smooth result.
About the resource
To create this animation, place 4 images inside a wrapper and nest it within a sticky frame. Set the sticky frame in 3D space by adding perspective and enabling preserve-3D on it and all layers inside.
Rotate each image 90° on the Y axis with the origin at x: 50, y: 0. Rotate the images wrap by 180° on the Y axis, then wrap it once more and rotate the outer wrapper 90° on the Y axis and -12° on the X axis.
Next, add a scroll transform to the images wrap with an X offset ( -1000) so the images move towards us. On the images themselves, apply another scroll transform to rotate on the Z axis along with an additional X offset.
Finally, set up the scroll triggers so the zoom effect from the wrap flows into the individual rotations. Add transitions to both scroll transforms for a smooth result.
The scroll transform effects on the image wrap.
The scroll transform effects on the image wrap.
The scroll transform effects on the image wrap.
