Animation
New Apple Slider Component in Framer
This is a sleek slider component in Framer recreated from Apple's latest website design. It features right and left navigation arrows, a play/pause button for autoplay control, and a unique circular progress indicator. Feel free to remix the project and see how these Apple-level web design patterns can be developed in Framer without writing any code!
Created by
About the resource
For setting up a slides, I use a structure that I've already described in this resource. A mini tutorial is also attached to that so you can get an idea of how it's built.
What I wanna focus more on here in this description is how I created the circular progress indicator.
About the resource
For setting up a slides, I use a structure that I've already described in this resource. A mini tutorial is also attached to that so you can get an idea of how it's built.
What I wanna focus more on here in this description is how I created the circular progress indicator.
About the resource
For setting up a slides, I use a structure that I've already described in this resource. A mini tutorial is also attached to that so you can get an idea of how it's built.
What I wanna focus more on here in this description is how I created the circular progress indicator.
The circular progress indicator in the navigation.
The circular progress indicator in the navigation.
The circular progress indicator in the navigation.
To create this, we have to use the masking feature. As you might already know, you can apply masks to any frame in Framer, to only show certain areas of that frame.
In this case, we create a vector mask in Figma, and save it as an SVG. Then we can apply this mask to a frame.
To create this, we have to use the masking feature. As you might already know, you can apply masks to any frame in Framer, to only show certain areas of that frame.
In this case, we create a vector mask in Figma, and save it as an SVG. Then we can apply this mask to a frame.
To create this, we have to use the masking feature. As you might already know, you can apply masks to any frame in Framer, to only show certain areas of that frame.
In this case, we create a vector mask in Figma, and save it as an SVG. Then we can apply this mask to a frame.
The result we see when masking with custom svg.
The result we see when masking with custom svg.
The result we see when masking with custom svg.
This result will be the base for our progress indicator. All we have to do is add a new frame within this masked frame and apply a new mask on that. This frame will have a different color, and in this case, we're applying a conic gradient mask to it. We'll be able to animate this conic gradient to move the progress bar around.
This result will be the base for our progress indicator. All we have to do is add a new frame within this masked frame and apply a new mask on that. This frame will have a different color, and in this case, we're applying a conic gradient mask to it. We'll be able to animate this conic gradient to move the progress bar around.
This result will be the base for our progress indicator. All we have to do is add a new frame within this masked frame and apply a new mask on that. This frame will have a different color, and in this case, we're applying a conic gradient mask to it. We'll be able to animate this conic gradient to move the progress bar around.
Applying a conic gradient to a frame.
Applying a conic gradient to a frame.
Applying a conic gradient to a frame.
On the little progress video below, you can see how the structure builds up, layer after layer. I hope that it helps you better understand the structure I used here. You can also find this in the remix file on the /explainer page.
On the little progress video below, you can see how the structure builds up, layer after layer. I hope that it helps you better understand the structure I used here. You can also find this in the remix file on the /explainer page.
On the little progress video below, you can see how the structure builds up, layer after layer. I hope that it helps you better understand the structure I used here. You can also find this in the remix file on the /explainer page.
Showcasing the strucutre, layer by layer.
Showcasing the strucutre, layer by layer.
Showcasing the strucutre, layer by layer.
