NoMore321
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by NoMore321
-
-
Hey guys!
I'm having difficulty making a column sticky within the 'layered pinning with variable height' demo you guys created. I've forked the pen and added columns.
Obviously position: sticky with a top value does nothing, but I'm surprised that I can't easily pin the column either. I've tried a variety of triggers and start and end points. Some assistance would be greatly appreciated!
(The right-hand column should only be pinned to the end of the left-hand column)
See the Pen 7e8402b1bae38bd08128c8e84630e3a3 by brynb (@brynb) on CodePen
-
That did it! Thanks a million @Cassie!
-
1
-
-
@GreenSock Do you mind having a look at this fork of the pen you posted above, and checking why the 400vw section isn't repeating the effect as expected?
Hopefully just a silly thing I'm not understanding. Much appreciated!
-
@akapowl Brilliant - I can't thank you enough! I'm still adjusting to much of the GSAP life so forgive my not thinking to pin instead of sticky.
-
2
-
-
I've recreated my issue with a simplified CodePen.
Without ScrollSmoother active, the middle (non-sticky) column scrolls perfectly as you'd expect while the other two columns remain in place.
Once ScrollSmoother is active, the height of the section is borked and no sticky scrolling occurs. What can I do to enjoy ScrollSmoother whilst still using sticky here and there as needed? (I've commented out the ScrollSmoother code in the CodePen - it's there to play with)
Thanks in advance!
See the Pen 3e45cd0ec5f8842a9d99db2c88b5ced2 by brynb (@brynb) on CodePen
-
1
-
Layered pinning and sticky/pinned column issue
in GSAP
Posted
@akapowl Wow, the help on this forum is absurdly good! A million thanks to you sir! Your second pen is perfect for targeting specific columns down the page!
Apologies for the private pen! I'll bear that in mind in the future.