MantasK

Hello again! I`ve got a sliding card thing going on. It works well however when I add drop shadow to it I get really bad performance issues. I had .featureCard then I added drop shadow ontop of it with tailwind. Thinking that mixing these was causing performance issues I tried copying what tailwind was generating directly onto the css component. I don`t mind not using the drop shadow I was just wondering why it might be causing the frame issues. I`m also using Nuxt. .featureCard { --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); --spacing: 6rem; position: relative; width: 90vw; height: calc(100vh - var(--spacing) * 3); top: var(--spacing); display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 30px; border-radius: 50px; background-color: #292524; border: solid 2px #57534e; z-index: 3; padding: 2rem; }

Thank you sir! Wish the title had something to do with card stacking haha I definitely would`ve found it in my hours of trying this...

Hello hope everyone is doing well, I`m trying to make like a timeline where when the first-child gets smaller once the second item is in view then when the next item is in view it also gets smaller. My first attempt I tried to animate each card individually but it wasn`t working smoothly and the page was flickering for some reason, I deleted that code and went to do some research. Then I came across this other post After following the steps I ran into the issue of not being able to figure out how could I make the previous card get smaller whilst the new card is sliding up. The effect I`m trying to achieve is something like on this https://weltio.com/ site if you scroll to the second section it will be there. Any input or tips is greatly appreciated thank you! Sorry for the really bad codepen I normally use tailwind and nuxt so I`ve forgotten vanilla CSS. https://codepen.io/dev-mantas/pen/poZLozp