corizon. Comments - Answer Overflow

oh no no, the pinning on the right was done with css. i pasted my js code in the code pen. the whole effect should be more accomplishable with gsap. i just used the css ticky code to show the effect i was trying to achieve. the left side pins correctly, why the right side doesn't pin properly for reasons i can't tell, but i know the end position of my markers are not where it is meant to be. so it causes the left side to unpin before the right side would be able to reach it's end.

9 replies

KPCKevin Powell - Community

•Created by corizon. on 1/15/2025 in #front-end

pinned element on scroll

just thought i should add this, at first the issue i had was that of the text being too long i was able to shorten the text, now i have some kind of jumpy pinning on mobile same as desktop where the image tries to fill up the gap or space created. so i had to throw a height of 100vh on the image to make it not to move. it's a lot going on tho be honest. i will really appreciate any help or idea. thanks y'all:)

9 replies

KPCKevin Powell - Community

•Created by corizon. on 1/15/2025 in #front-end

pinned element on scroll

i want to end up with the card stack effect above, where the left hand side pins until the user finishes the scrolling throught the cards as they stack on each other on the right side. then unpin once they are done. here's my codepen link showing my setup: https://codepen.io/Chinagorom-Charles/pen/dPbmKzw

9 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

and i just added the images 🥹 thanks a lot everyone especially @Chris Bolson and @i_lost_to_loba_kreygasm 🤍

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

now unto the next: putting my images inside the timeline 🙂

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

I just had to remove the inset and added a top of 10% and it was centered perfectly and i was able to see all the numbers

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

@Chris Bolson hey, i figured it out

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

but i still have that issue with the clip path where it cuts off the top point

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

Okay now I positioned it to the center using the left: 50% and transform translate: -50%

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

please ignore the background noise, so basically when i remove position absolute from the card-container it centers the wheel properly. But when i do so it aligns the wheel to the right. Even when there’s margin-inline:auto

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

@Chris Bolson it’s working pretty well now. I just have to figure out how to add the images now, thank you

56 replies

KPCKevin Powell - Community

•Created by corizon. on 1/3/2025 in #front-end

Please how do i achieve this?

Hmm, great. I will take a look at this

56 replies

KPCKevin Powell - Community