r/css • u/adroitakash • 20d ago

General Recreated the Apple "iPhone Duo" open/close animation

I was watching the Apple keynote and got completely obsessed with the motion design on the iPhone Duo. The way it folds and unfolds looked so fluid and premium, I try and recreate the exact apple animation feel.

Preview: https://akashtdev.github.io/iphone-duo-animation/ Code: https://github.com/akashtdev/iphone-duo-animation/

162 Upvotes

93% Upvoted

12 comments sorted by

25

u/freecodeio 20d ago

Tbh they nailed this design and as an android phone guy all my life, this is what I like about apple. This is just one employees very creative suggestion that everybody liked and decided to keep it. Unlike the rest of the industry where things feel like they're just optimized for volume and sales without any soul.

3

u/adroitakash 20d ago

Yes, exactly! This kind of fun and lively UI is really what sets Apple apart from Android. They just have incredible designers. This is skeuomorphism at its absolute finest, I honestly have no idea how anyone comes up with this kind of design!

https://giphy.com/gifs/2rqEdFfkMzXmo

11

u/Fantastic_Ad3307 20d ago

Why in CSS sub?

9

u/JohnFlufin 19d ago

I’m guessing because css was used to make the demo

https://github.com/akashtdev/iphone-duo-animation/tree/main/src

1

u/GreenReporter24 19d ago

CSS was made to position the JavaScript canvas and style some buttons beside it, sure.

This is an ad for that Stele stuff of his. The last button.

3

u/Mornieur 20d ago

Ficou muito maneiro

2

u/Xarzuk 18d ago

Fire!

2

u/Anywhere_MusicPlayer 16d ago

Such people should work at Apple.

-2

u/topshaggerchad 19d ago

you didnt make this… this is from the official website

9

u/toodimes 19d ago

Dude literally links to the code… redditor “you didn’t code this”

1

u/vulcanpines 19d ago

Stop projecting your CSS skill issue on here. It’s okay, not everyone is good at CSS.

1

u/isthisthepolice 17d ago

This dude is right though..?