[Performance issues with scrollTrigger and dropshadows.]

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;

}

[Making a timeline with scrollTrigger]

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...

 

[Making a timeline with scrollTrigger]

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.

See the Pen poZLozp by dev-mantas (@dev-mantas) on CodePen