Jump to content
Search Community

vanss472

Members
  • Posts

    12
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

vanss472's Achievements

  1. Thank you!!! I think I know where to look now. ?
  2. The issue is the `PinSections` component, if I remove the component I can navigate the site. GSAP is manipulating the DOM in that `PinSections` useLayoutEffect. For me, it looks like using `gsap.context` to clean up is not working. I'm looking for any other suggestions or possible fix. Clean up the files at: https://codesandbox.io/p/sandbox/infallible-rui-tljzd2?file=%2Fcomponents%2FPinSections.tsx%3A20%2C49 Preview link: https://tljzd2-3000.csb.app/
  3. When navigating away from the homepage to a test page. I'm getting this error: ``` NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. ``` I'm using `gsap.context` and using revert() to clean up when unmounting but still getting that error, any idea why? Here is a link to a code sandbox that replicates the problem: https://codesandbox.io/p/sandbox/infallible-rui-tljzd2?file=%2Fcomponents%2FPinSections.tsx%3A20%2C49 Thanks!
  4. @Rodrigo aaaah you're right thanks eagle eyes!!!
  5. Is there a way to control the `::before` `background-color` to gradually turn black while scrolling? Right now is just turning black immediately the pinned class is active.
  6. Hey @Rodrigo, so it does make sense in the example above but when I try on my it doesn't quite work the same. It looks like in my case using a negative value doesn't work as expected. Any other tip? Thanks! .fromTo( bg.current[index].firstElementChild, { y: () => (index ? slide.offsetHeight * 0.2 : 0) }, { y: () => -slide.offsetHeight * 0.2 }, "<" )
  7. Hey @Rodrigo, I'm back with another question. I want to add a parallax effect to the image/video. I currently have something happening when you start scrolling you'll see the media that is been reveal have a subtle effect but I also want to have the effect on the media that is being removed from the viewport. Any good tips? Thanks! .fromTo( bg.current[index].firstElementChild, { y: () => slide.offsetHeight * 0.2 }, { y: 0 }, "<" ) https://codepen.io/Vanss472-the-decoder/pen/abQYeLB
  8. Hey @Rodrigo, you have been really helpful! I noticed you added a 1s duration to the timeline, does that refer to the duration of each slide or the whole timeline (meaning all slides)? Each slide, right?
  9. Hi @Rodrigo, you are saying in my case is it not possible to track the center of the screen using the ScrollTrigger end markers? Would I need to play with the timeline position parameter in order to trigger any animation? I updated my CodePen: 1. Any idea why the slideToSection scrollTo would not work? 2. Related to my question above, I added another ScrollTrigger instance inside the slides forEach and I was able to add the end marker to the bottom of slide 2 & 3. https://codepen.io/Vanss472-the-decoder/pen/abQYeLB
  10. Hi @Rodrigo, I think I'm still approaching this the wrong way. Correct me if I'm wrong, by pinning the `container` instead of each slide it would be hard to track the scroll position, right? Because I'm also trying to add animation(bg and nav items) on each slide when it hits the center of the viewport.
  11. @Rodrigo thanks for the reply, I have tried a different approach and now I wondering how can I control the scrolling, while scrolling it feels like the transition is going really fast. Is it possible to do it with ScrollTrigger without adding ScrollSmoother? https://codepen.io/Vanss472-the-decoder/pen/abQYeLB
  12. I'm trying to recreate the GSAP Observer demo but using ScrollTrigger instead. My issue is when you scroll, I see a black frame at the end of every slide. Any advice would be greatly appreciated. I'm also trying to use `position: absolute` for each section is that possible using ScrollTrigger? I want to be able to control the vertical scrolling, and then snap after the user is idle for like 5 seconds. GSAP Observer: https://codepen.io/GreenSock/pen/XWzRraJ GSAP ScrollTrigger https://codepen.io/Vanss472-the-decoder/pen/MWzQoNY
×
×
  • Create New...