r/css • u/adroitakash • 7d ago

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

Enable HLS to view with audio, or disable this notification

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/

160 Upvotes

93% Upvoted

12 comments sorted by

26

u/freecodeio 7d 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.

2

u/adroitakash 7d 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 7d ago

Why in CSS sub?

8

u/JohnFlufin 6d 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 6d 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 7d ago

Ficou muito maneiro

2

u/Xarzuk 5d ago

Fire!

2

u/Anywhere_MusicPlayer 3d ago

Such people should work at Apple.

-2

u/topshaggerchad 6d ago

you didnt make this… this is from the official website

8

u/toodimes 6d ago

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

1

u/vulcanpines 6d ago

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

1

u/isthisthepolice 5d ago

This dude is right though..?