KPC
Kevin Powell - Community•4d ago
corizon.

pinned element on scroll

hey, i've been trying to get this card pin scroll stack animation effect to work for a while now (hours) i was able to get somethings off the internet but that only worked for my mobile screen, tho it wasn't so smooth. but i've been having a hard time doing it on desktop screen
No description
5 Replies
corizon.
corizon.OP•4d ago
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 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:)
Kevin Powell
Kevin Powell•4d ago
Something like this should work: 
.hero__story {
  position: sticky; 
  top: 1rem;
}

.hero__story:nth-child(5) {
  top: 2rem;
}

.hero__story:nth-child(6) {
  top: 3rem;
}
.hero__story {
  position: sticky; 
  top: 1rem;
}

.hero__story:nth-child(5) {
  top: 2rem;
}

.hero__story:nth-child(6) {
  top: 3rem;
}
I used :nth-child(5) and 6 here because you had the mobile versions first... I don't think you need to duplicate anything though, I'd just go with one set. Unless I'm misunderstanding something, but I don't see the difference between the two
corizon.
corizon.OP•3d ago
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.
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasm•3d ago
why not use gsap for this ? 🙂 oh my bad , you already are
corizon.
corizon.OP•3d ago
yes i kinda figured it out not but i experience some jumpy behavior while i scroll yeah

Did you find this page helpful?