Jump to content
Search Community

a6t9v

Members
  • Posts

    4
  • Joined

  • Last visited

a6t9v's Achievements

  1. Thank you so much for your help! @mvaneijgen You've truly made my day. I get it now. Also, I've just realized that all I need is a just sticky header. https://codepen.io/metal-joker/pen/yLrEVKQ
  2. Thank you for providing an excellent guide on creating a stacked card. @mvaneijgen However, I'm still quite confused, particularly regarding the pin-spacer, as it seems to occupy a significant amount of space when pinning elements. To illustrate my point more clearly, I've created a CodePen demo that can be embedded here. https://codepen.io/metal-joker/pen/abxKBzX There's two error in this demo: 1. The title glitches slightly when it is pinned. 2. When the title is pinned, the pin-spacer begins to scroll before the real content, preventing the real content from being fully displayed. I hope this clarifies my question. Thank you for your time once again.
  3. Hi @mvaneijgen, Thank you for the prompt reply! I'm still a bit confused about this situation. What I'm aiming for is something similar to the ScrollTrigger example demo: https://codepen.io/GreenSock/pen/KKpLdWW I have lot of `content` in `#content-wrapper` when a content scroll to top, pin its title and continue scroll it's content till the content end reaches the top, then pin next content header on top, loop till all content is scrolled. Timeline can only have one scroll trigger right? I edited origin demo, removed left panel to prevent misleading. ScrollTriggers is disabled by default to show the real layout looks like. Please check it out. https://stackblitz.com/edit/stackblitz-starters-x9dlh9?file=app%2Fpage.tsx Thank you sincerely for your time!
  4. I made a minimal reproduce demo with official nextjs and gsap StackBliz template. https://stackblitz.com/edit/stackblitz-starters-k53gvn?file=app%2Fpage.tsx I'm facing confusion regarding the behavior of the pin-spacer. It seems to be adding a significant blank space between #content1-title and #content. You can verify this by deleting the GSAP hook to observe the original layout. Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you!
×
×
  • Create New...