Component
Squishing Slider Animation in Framer
This is a Framer recreation of the squishing slider animation from the goodisthenewcool's website, featuring squishing images with smooth 3D rotations for a playful sliding effect.
Created by
About the resource
To create the squishing slider animation, start by setting up a slider component with multiple variants. In Slide 1 (default), stack three images: image 1 on top (flat, origin 50% 0%), image 2 in the middle, and image 3 at the bottom (both rotated 90° x, origin 50% 100%). This keeps image 1 visible while images 2 and 3 stay hidden.
In Slide 2 mid, image 2 unfolds from 90° to 0° while image 1 folds away from 0° to 90°. In Slide 2, both images hold position, but image 2’s origin shifts to 50% 0% to anchor it at the top. The same sequence happens for Slide 3 mid and Slide 3: image 2 folds down again, image 3 unfolds (90° → 0°), and its origin shifts from bottom (50% 100%) to top (50% 0%). Finally, in Slide 1 mid, image 1’s origin resets to 50% 100% so the loop can restart smoothly.
For the interaction, set a click trigger that instantly switches to the mid variant, then eases into the final slide. This combination of instant and smooth transitions is what creates the squishy, folding effect between images.
About the resource
To create the squishing slider animation, start by setting up a slider component with multiple variants. In Slide 1 (default), stack three images: image 1 on top (flat, origin 50% 0%), image 2 in the middle, and image 3 at the bottom (both rotated 90° x, origin 50% 100%). This keeps image 1 visible while images 2 and 3 stay hidden.
In Slide 2 mid, image 2 unfolds from 90° to 0° while image 1 folds away from 0° to 90°. In Slide 2, both images hold position, but image 2’s origin shifts to 50% 0% to anchor it at the top. The same sequence happens for Slide 3 mid and Slide 3: image 2 folds down again, image 3 unfolds (90° → 0°), and its origin shifts from bottom (50% 100%) to top (50% 0%). Finally, in Slide 1 mid, image 1’s origin resets to 50% 100% so the loop can restart smoothly.
For the interaction, set a click trigger that instantly switches to the mid variant, then eases into the final slide. This combination of instant and smooth transitions is what creates the squishy, folding effect between images.
About the resource
To create the squishing slider animation, start by setting up a slider component with multiple variants. In Slide 1 (default), stack three images: image 1 on top (flat, origin 50% 0%), image 2 in the middle, and image 3 at the bottom (both rotated 90° x, origin 50% 100%). This keeps image 1 visible while images 2 and 3 stay hidden.
In Slide 2 mid, image 2 unfolds from 90° to 0° while image 1 folds away from 0° to 90°. In Slide 2, both images hold position, but image 2’s origin shifts to 50% 0% to anchor it at the top. The same sequence happens for Slide 3 mid and Slide 3: image 2 folds down again, image 3 unfolds (90° → 0°), and its origin shifts from bottom (50% 100%) to top (50% 0%). Finally, in Slide 1 mid, image 1’s origin resets to 50% 100% so the loop can restart smoothly.
For the interaction, set a click trigger that instantly switches to the mid variant, then eases into the final slide. This combination of instant and smooth transitions is what creates the squishy, folding effect between images.
The six variants of the slider main component in Framer.
The six variants of the slider main component in Framer.
The six variants of the slider main component in Framer.
