Apple Animation

Ask the community
, , ,
1

Hi All,

I’m trying to recreate a this exact animation from apple (see video). Can anyone help me with this. I’ve been using a repeater at the moment with a pill shape containing a title+icon and a text box.

I start with the text box hidden, On clicked I want the title+icon to fade off and the pill shape to grow to the text box size and the text box to then fade on. As it does that the other items would move to accommodate the new size of the pill shape.

Once I get this part to work, I would also use the pill click to trigger different videos on the right to slide in like it does with apple. but currently I can’t get the pill animations looking nice.

Link to Apple Video: https://drive.google.com/file/d/1aOAkYsnTcr6AILburG-QH0KL5DZ67hjC/view?usp=drive_link

Link to Apple Page: AirPods Pro 3 - Apple

2

Hi, @user6523 !!

If you want to create smooth animations like that, using a flexbox together with your global.css instead of a repeater might work better. :innocent: :raising_hands: