Awesome Idea man. 👏 I’ve got a tip for you. If you’re use Webflow native Custom Element for the image, heading & paragraph, then you can take advantage of Custom Attributes to easily add inline styles. 😉
tried this but in some instances we don't get access to the CMS property we need. for example. Custom Element with img tag doesn't give access to the image to set src. :( also, to my knowledge we need to express unique id's for each element, (even if they have a different tag, though I didn't verify this). using the embed, we can add a suffix string if we have multiple elements transitions using view-transition-name=slug.
There's more calculation I'm sure but it's most likely going to be more performant than any JS solution. These kinds of transitions are all over the place in mobile apps too. I think it's fine :).
@webbae It's all up to us, but in their docs they have a quick fade of content in between full size and card size. "Fade content out before fading new content in to maintain a clean design" Also, can you recreate or get close to recreating their carousel in webflow? It has a grow/shrink with size hierarchy and parallax
Great video man
Appreciate it
Nice. Thank you
I have no ideea why I did not subscribe earlier. Thanks for the value
Welcome aboard! 🫡
Awesome 😮 bae
Thanks Surendar 🤗
Is it possible to control the duration and easing of the animations of the image and text?
Awesome Idea man. 👏
I’ve got a tip for you. If you’re use Webflow native Custom Element for the image, heading & paragraph, then you can take advantage of Custom Attributes to easily add inline styles. 😉
tried this but in some instances we don't get access to the CMS property we need.
for example. Custom Element with img tag doesn't give access to the image to set src. :(
also, to my knowledge we need to express unique id's for each element, (even if they have a different tag, though I didn't verify this). using the embed, we can add a suffix string if we have multiple elements transitions using view-transition-name=slug.
I love this.
Let's all just pretend Safari doesn't exist😇
it's supported since september 2024
This is all good locally, but aren't there major rendering issues, epecially with slower bandwidth users?
There's more calculation I'm sure but it's most likely going to be more performant than any JS solution. These kinds of transitions are all over the place in mobile apps too. I think it's fine :).
Material io has fantastic ux documentation for this type of feature
I always learn a ton from their docs! I will have a look at what they say about cards!
anything I missed btw?
@webbae It's all up to us, but in their docs they have a quick fade of content in between full size and card size. "Fade content out before fading new content in to maintain a clean design"
Also, can you recreate or get close to recreating their carousel in webflow? It has a grow/shrink with size hierarchy and parallax
@@nier3434 this one? m3.material.io/components/carousel/overview
@@webbae yes 😁
I understand why I haven't seen this feature, it's not supported by all browsers
yea just came to Safari but no word from firefox :(. Nice that it's a progressive enhancement and fallback behavior works for normal navigation.
This video sold me on Pygmy goats
you are sold? you are buying a goat?