Animation
Footer Scroll Animation in Framer
Created by
About the resource
This scroll animation primarily uses the scroll transform feature from Framer. Here's how it works: I stack the circles on top of each other, using different Z-indexes to set their order (the white one is on top, with the blue one below). Then, I apply scroll transforms to each by using scroll section triggers, scaling down the circles as I go along.
A neat little trick I utilize is shifting the second scroll section trigger slightly lower. This makes the blue circle start moving slightly after the white one. You can spot this second scroll section under the name "Trigger" in the project.
About the resource
This scroll animation primarily uses the scroll transform feature from Framer. Here's how it works: I stack the circles on top of each other, using different Z-indexes to set their order (the white one is on top, with the blue one below). Then, I apply scroll transforms to each by using scroll section triggers, scaling down the circles as I go along.
A neat little trick I utilize is shifting the second scroll section trigger slightly lower. This makes the blue circle start moving slightly after the white one. You can spot this second scroll section under the name "Trigger" in the project.
About the resource
This scroll animation primarily uses the scroll transform feature from Framer. Here's how it works: I stack the circles on top of each other, using different Z-indexes to set their order (the white one is on top, with the blue one below). Then, I apply scroll transforms to each by using scroll section triggers, scaling down the circles as I go along.
A neat little trick I utilize is shifting the second scroll section trigger slightly lower. This makes the blue circle start moving slightly after the white one. You can spot this second scroll section under the name "Trigger" in the project.
