Jump to content


  • Posts

  • Joined

  • Last visited

inzn's Achievements

  1. Hey @mvaneijgen, thanks for the swift response! I built a CodeSandbox here: https://codesandbox.io/s/xenodochial-flower-2dlzbd?file=/src/pages/index.js – hope this works! As you can see, the text get's pushed down but in a jumpy manner and the overlays some other text. It doesn't feel professional at all at the moment haha Thanks a lot!
  2. Hey, I'm relatively new to GSAP / Scrolltrigger, but I have a demo of what I kind of would like to have here: https://art-advance-git-test-peach-inzn.vercel.app Basically, I want to have my hero video sticky until the last text box. Then, the text box should pin while the video fades out and “unsticks”. Currently, this is quite buggy and certainly not done correctly. let text = document.querySelectorAll(".text"); ScrollTrigger.create({ trigger: text[text.length - 1], pin: true, start: "top center-=" + 200, end: "+=" + 500, markers: true, }); gsap.to(".main .hero", { opacity: 0, scrollTrigger: { trigger: text[text.length - 1], start: "top center-=" + 200, end: "+=" + 500, scrub: 0.5, }, }); As you can see, the sticky part works (video is set to position: sticky) and the fading part works as well. However, the pinned text now goes over some other text (and scrolling is a bit jumpy), which is not what I want to achieve. It should stay at its position and push all following elements down until the video is gone. Apologies in advance for the amateur question, I hope someone here might point me in the right direction! Thanks
  3. Hey @ZachSaucier, I am having a similar issue. I want to clip-path on scroll when the top of my image is in the center of the viewport and stop when it's bottom is at the bottom. I have set markers but it seems the top marker is positioned below the image container and therefore it does not work. What might cause this to happen? I've made a small codesandbox here: https://codesandbox.io/s/trusting-diffie-fv7y5l