Use Framer Motion's layoutId and mix-blend-mode: exclusion to create some slick animated tabs!

🔗 LINKS
Code: [ Ссылка ]
Build UI Lifetime Membership: [ Ссылка ]
React Aria Components version: [ Ссылка ]

🕐 TIMESTAMPS
0:00 – Intro
0:35 – Layout animation example
2:26 – Animating the pill element
4:47 – Stacking the text on top
5:31 – Fixing the border radius distortion
7:38 – Inverting the text with mix-blend-exclusion
10:57 – Outro

свернуть