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
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. 
1 Like
Thank you!
Managed to get it working on desktop now. However I have a new issue now. On the apple website the pills move to a slider style flexbox on mobile. and once a pill is open it locks itself center and allows you to swipe through to the next pill or tap an arrow to move to the next. I am really struggling to get this to work, I think apple actually calculates the position of each pill and moves them physically.
Any ideas how I could create this, it’s like a cross between a slider and a slides layout.
new video: https://drive.google.com/file/d/1PKap--xxlM-pzKTlKLqMxMwsUmYwHHU5/view?usp=drive_link
I’m not sure if I fully understand the issue, but if you’ve already created the desktop version, you could just add another section for the mobile version (and hide it at the desktop breakpoint). Simply placing the flex box we created into a slideshow element should be enough to finish it, don’t you think ?