New
New
New
Animation
Flip Scroll Animation in Framer
This is a Framer recreation of the scroll animation from Diego Toda de Oliveira’s personal portfolio. Feel free to remix the project to see how something like this can be made just by drawing rectangles on a design canvas—no need to write a single line of code.
Created by
About the resource
To create this effect in Framer, we have to use the good old sticky positioning technique with the timeline method. If you want to dive deep into how it works and want to learn it, make sure to give this tutorial a watch.
The point is that we have a sticky frame in the view, that contains all the elements we’ll have in the animation. All the running text stripes and all the card variations (in this case, as one component).
To prepare for animating, we also setup a “timeline” below the sticky frame, which will define in what order animations play out.
About the resource
To create this effect in Framer, we have to use the good old sticky positioning technique with the timeline method. If you want to dive deep into how it works and want to learn it, make sure to give this tutorial a watch.
The point is that we have a sticky frame in the view, that contains all the elements we’ll have in the animation. All the running text stripes and all the card variations (in this case, as one component).
To prepare for animating, we also setup a “timeline” below the sticky frame, which will define in what order animations play out.
About the resource
To create this effect in Framer, we have to use the good old sticky positioning technique with the timeline method. If you want to dive deep into how it works and want to learn it, make sure to give this tutorial a watch.
The point is that we have a sticky frame in the view, that contains all the elements we’ll have in the animation. All the running text stripes and all the card variations (in this case, as one component).
To prepare for animating, we also setup a “timeline” below the sticky frame, which will define in what order animations play out.
The structure of the effect.
The structure of the effect.
The structure of the effect.
As you can see in the image above, each card flip has three parts. First, the out section moves the running text up and starts rotating the card 90 degrees. Then we hit the second part, which is the switch. This handles switching the card variant. We do the switch here because, at this point, the card is rotated 90 degrees, so the switch isn’t visible and it looks like a smooth transition from one side of the card to the other. We finish with in, which animates the new running text in and rotates the card another 90 degrees, now showing the new content.
If you dive deep into the 3D flipping mechanism inside of Framer and you want to learn it, make sure to give this tutorial a watch.
As you can see in the image above, each card flip has three parts. First, the out section moves the running text up and starts rotating the card 90 degrees. Then we hit the second part, which is the switch. This handles switching the card variant. We do the switch here because, at this point, the card is rotated 90 degrees, so the switch isn’t visible and it looks like a smooth transition from one side of the card to the other. We finish with in, which animates the new running text in and rotates the card another 90 degrees, now showing the new content.
If you dive deep into the 3D flipping mechanism inside of Framer and you want to learn it, make sure to give this tutorial a watch.
As you can see in the image above, each card flip has three parts. First, the out section moves the running text up and starts rotating the card 90 degrees. Then we hit the second part, which is the switch. This handles switching the card variant. We do the switch here because, at this point, the card is rotated 90 degrees, so the switch isn’t visible and it looks like a smooth transition from one side of the card to the other. We finish with in, which animates the new running text in and rotates the card another 90 degrees, now showing the new content.
If you dive deep into the 3D flipping mechanism inside of Framer and you want to learn it, make sure to give this tutorial a watch.
