New Apple Slider Component in Framer

Copy component

New Apple Slider Component in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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!

image of Nandi Muzsik

Created by

New Apple Slider Component in Framer
New Apple Slider Component in Framer
New Apple Slider Component in Framer

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

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.

masking a frame in Framer

The result we see when masking with custom svg.

masking a frame in Framer

The result we see when masking with custom svg.

masking a frame in Framer

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 conic gradient mask in Framer

Applying a conic gradient to a frame.

applying conic gradient mask in Framer

Applying a conic gradient to a frame.

applying conic gradient mask in Framer

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation