Animation
Flying Paper Plane Scroll Animation in Framer
This is a flying paper plane scroll animation recreated in Framer as seen on the Feather computer website. Feel free to remix the file and explore how the scroll animation is built using scroll transform and no code.
About the resource
To create this animation, I started by grouping the paper plane layer and its shadow inside a single frame. I applied a scroll transform to this grouped frame using trigger sections.
In the from state, I scaled the group up a bit, rotated it slightly, and added offset values on both the X and Y axis so the plane enters from outside the canvas.
In the to state, I scaled it back down and adjusted the offsets so the plane lands neatly inside the canvas. I also added separate scroll transforms to the plane frame and the shadow frame.
For the plane, I adjusted the Y offset so that as it lands, it moves closer to its shadow. For the shadow, I changed the opacity so it fades from stronger to lighter as the plane touches down.
About the resource
To create this animation, I started by grouping the paper plane layer and its shadow inside a single frame. I applied a scroll transform to this grouped frame using trigger sections.
In the from state, I scaled the group up a bit, rotated it slightly, and added offset values on both the X and Y axis so the plane enters from outside the canvas.
In the to state, I scaled it back down and adjusted the offsets so the plane lands neatly inside the canvas. I also added separate scroll transforms to the plane frame and the shadow frame.
For the plane, I adjusted the Y offset so that as it lands, it moves closer to its shadow. For the shadow, I changed the opacity so it fades from stronger to lighter as the plane touches down.
About the resource
To create this animation, I started by grouping the paper plane layer and its shadow inside a single frame. I applied a scroll transform to this grouped frame using trigger sections.
In the from state, I scaled the group up a bit, rotated it slightly, and added offset values on both the X and Y axis so the plane enters from outside the canvas.
In the to state, I scaled it back down and adjusted the offsets so the plane lands neatly inside the canvas. I also added separate scroll transforms to the plane frame and the shadow frame.
For the plane, I adjusted the Y offset so that as it lands, it moves closer to its shadow. For the shadow, I changed the opacity so it fades from stronger to lighter as the plane touches down.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
