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.
By using DOM rewriting, and other modern techniques involving manipulating things that are higher than the HTML page. To do this you need to be able to control the server, sort of. That’s why we can’t do this on a Webflow hosted site.
You can achieve similar behavior but you’ll stay on the same page, and you can see the limitations of this obviously.
There is a solution in the middle: finding a way to animate the page before leaving it and put it in a state approaching the state of the page you cant to reach (where you can have an onload animation too). So there will be a white flash (so it’s better than you transition to white) but you get the fake transition effect. To achieve this you’ll need a javascript custom code to put a delay on a link (to let the transition happen before switching to the other page).
For a Webflow hosted site, Webflow alone can bring the page transition feature. I can be wrong, but maybe they’re in a good position to do so. Imagine if we can design our page transitions with the IX engine…
