Jul 23, 2024

Copy component

Copied

Framer

Framer

Framer

Apple Know More Button Animation

Apple Know More Button Animation

Apple Know More Button Animation

I was going through, apple's website, for some research, and I found a cool animation on the site. So I replicated it and created Interactive category button, fully customizable and responsive. Check out the break down below.

First, we need to make the component itself, for that I made 6 variants of the component, picture below.

1,2,3 are connected as entry animation, and 4,5,6 are for Exit animation.

These all are connected and have transforms applied to them to make the animation happen. For eg: Let's see the transforms in variant 2

With these, I've connected all the elements, and make the animation work as intended.


Next, it has to work in a category and be sticky as well.

For that, I made a section, and placed the component inside of it.

To make the component show up at the start, and exit at the bottom end or top end, was a bit tricky.

But I figured it out.

It uses scroll sections!

At start 1, it uses variant 4 which is the exit animation.

The animation actually starts one the first image is in the view port. If you go up from there, the exit animation activates.

Similarly, at the end section i use variant 4 to animate the exit.


It is actually simple, now that it works. Still took some thinking and tinkering.

Let me know your thoughts on this, and if you have any questions let me know. If you like this one you can share it to X or any where else. It helps me alot to keep making free components and resources for the community.

Enjoy the resource!

Design Strategist

Get Reliable Designs for Uninterrupted Growth

Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.

Book A Call

Aman BG
Aman

Design Strategist

Get Reliable Designs for Uninterrupted Growth

Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.

Book A Call

Aman BG
Aman

Design Strategist

Get Reliable Designs for Uninterrupted Growth

Achieve stunning, consistent marketing visuals with BLC's design service. Quick turnarounds and personalized attention & satisfaction guaranteed.

Book A Call

Aman BG
Aman

Know your designer

Know your designer

Know your designer

Connect with me to gain insights, access valuable resources, and see behind the scenes content. Follow me to stay updated with tips, tricks, and design inspiration.

Connect with me to gain insights, access valuable resources, and see behind the scenes content. Follow me to stay updated with tips, tricks, and design inspiration.

X / Twitter

Follow me here for updates, tips, and insights. I'm most active here, sharing everything from important news to casual thoughts.

Instagram

Find videos on important topics, resources, and other design related content. Follow for tutorials and design inspiration!

Instagram

Find videos on important topics, resources, and other design related content. Follow for tutorials and design inspiration!

Figma Community

Access free resources and assets trusted by 6K+ designers. Follow me on Figma to enhance your design projects.

Figma Community

Access free resources and assets trusted by 6K+ designers. Follow me on Figma to enhance your design projects.

Add social share buttons to your Framer website.

Let visitors share your page to their social media accounts in one click.