Streaming live at 10am (PST)

Material card expand transition


#1

Hello

Does anyone have any recomendations / ideas how to achieve this card expand animation?..

I’m not too bothered about getting the highlight on click / tap. I’m looking at the expanding to full screen and revealing more content.

Thanks in advance.


Here is my public share link: LINK
(how to access public share link)


#2

Hey,

Basically you would need to wrap card in a div, and in interactions simply do a combination of scale and move of this wrapper to fill the screen and position at the top. Maybe you would need to display none the rest of content or simply put the “active card” at a higher z-index than the rest. Then inside card your would make a display hide/show interaction on content wrapper div + maybe some opacity for smoother transition.

That would probably be the basics in terms of concept.

Maybe in terms of the scale animation you rather need to play with the size option in webflow (for it to scale exactly at 100vw from the 97vw before click) ?


#3

Nice one. thanks for that. Will give it a shot.