I’m wondering if anyone would know how to do the following.
Imagine a blog page with a bunch of cards for each story and each card has a image in it. When the user clicks a card, that card’s image animates to the top and becomes the image for that story page. I’ve seen this done before but of course I can’t find an example when I need one but I’ll attach an image to show what I mean.
Here are a couple issues that come to mind when trying to do this. How does this image animate seamlessly if it is going to a new page? Would you be able to have each blog post still be its own page (url)? How do you handle animating a mask if the card has rounded corners or is cropped within the card? The other difficult thing for me would be that this card would have to be in any position on the page and animate from its current position to the top.
If there is a tutorial out there somewhere I would love to see it! Thanks in advance.
Disclaimer - The card design is from Dribbble user Jack W. and not my own work