Jump to content
Search Community

inzn

Members

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by inzn

    Scrolltrigger pin section that is a trigger

    in GSAP

    Posted

    Hey @Cassie, thanks a lot for the helpful and insightful response!

     

    I went with your suggestion to avoid nested pinning and wrote some (GSAP unrelated) logic to remove the section from my components if index = 0.

     

    Regarding my second question, I noticed that my code always does

    ScrollTrigger.refresh();

    ScrollTrigger.sort();

     but when I reverse this to

    ScrollTrigger.sort();

    ScrollTrigger.refresh();

    it seems to be working as expected.

    • Like 1

    Scrolltrigger pin section that is a trigger

    in GSAP

    Posted

    I'm working on a page that has a intro which should go up, while the rest of the page stays pinned. So far so good. The pinned page has some ScrollTrigger animations though, which obviously don't work (because of it's pin I guess – without pinning it works). Demo here: https://codesandbox.io/p/sandbox/fancy-architecture-ddz5cn?file=%2Fcomponents%2Fabout.tsx%3A44%2C1 I'm wondering what a potential solution could be to this? Probably a rookie mistake, but so far none of the other forum solutions have helped.

     

    And then the follow up question: When I split everything up in multiple components as I did now, how can I make sure ScrollTrigger refreshes and shows all the animations in the correct order etc. I now have ScrollTrigger.sort() and .refresh() in all the components, but I noticed that sometimes the spacing is not correct and some animations overlap. Is there a way to have a “final” ScrollTrigger.sort() and .refresh() in the parent component once all children are loaded?

     

    Thanks in advance!

    ScrollTrigger multiple timeline on absolute sections

    in GSAP

    Posted

    Minimal Demo here: https://stackblitz.com/edit/stackblitz-starters-bg5bww?file=pages%2Findex.js

     

    I have so far manage to make most of what I want work – though undoubtedly not very efficiently.
    My goal is do to the following: 
    1. The indicators should start from width: 0 and go to width: '100%' for each section separately. (Works)
    2. The divs should fade it or show up once I have scrolled far enough. Currently they fade in because I don't know how to set them straight to opacity: 1. Div1 is visible from the start, Div2 after scrolling 100vh, Div3 after 200vh and so on. (Works)
    3. After I have scrolled through all of these sections (300vh), the container should scale down to 0.95 and also get a border-radius. (Doesn’t work)

     

    I'm having a bit of trouble with this, since the sections are absolute positioned and I don't really know how Scrolltrigger works with scrolling values. So all the code I already have is pretty much from reading these forums.

     

    Maybe somebody can help me out – thanks in advance already!

    Tween intersecting Timeline overlaps elements

    in GSAP

    Posted

    @mvaneijgen Thanks for your response! I'm unfortunately not sure where to change the sharing settings in Codesandbox, but forking it should work? 

     

    I tried adding a ScrollTrigger.refresh(); to the end of my useLayoutEffect, but that didn't help unfortunately. Regarding your suggestion, I'm not sure how it works because I have different triggers (.manifestoQuoteSection and .manifestoSlider). I did add markers to my sandbox and you can clearly see how the manifestoQuoteSection that happens after manifestoSlider is disregarding the sliders height/padding.

     

    https://codesandbox.io/p/sandbox/nifty-grass-siuqo3?file=/pages/index.tsx&selection=%5B%7B%22endColumn%22:1,%22endLineNumber%22:7,%22startColumn%22:1,%22startLineNumber%22:7%7D%5D

    • Like 1

    Tween intersecting Timeline overlaps elements

    in GSAP

    Posted

    I have a timeline that looks like this: 

    const quotes = gsap.utils.toArray<HTMLElement>('.manifestoQuoteSection');

quotes.forEach(quote => {
gsap.to(quote.querySelectorAll("span"), {
	opacity: 0,
	stagger: {
	amount: 1.5,
	ease: "power2.inOut",
	from: "random",
},
scrollTrigger: {
  trigger: quote,
  start: "top top",
  scrub: 1,
  pin: true,
  anticipatePin: 1
  }
});

    There are 4 quote elements with text where I'd like the words to fade out randomly and the container should stay pinned. This works so far!

     

    Then, I have another container, a horizontal image one with the following tween: 

    gsap.to(".manifestoSliderInner", {
  x: -manifestoSliderContainer.current!.scrollWidth + window.innerWidth,
  scrollTrigger: {
    trigger: ".manifestoSlider",
    start: "top top",
    end: "+=" + (manifestoSliderContainer.current!.scrollWidth - window.innerWidth),
    scrub: 1,
    pin: true,
    anticipatePin: 1
  }
});

    It scrolls from right to left until the end is reached – this also works.

     

    Now, I want to combine these two things:

    – Quote

    – Quote

    – Horizontal Image Slider

    – Quote 

    – Quote

     

    This, however, results in some strange overlays of the content (see image). I assume because the two animations overlay and don't take the pin amount into account?

     

    Screenshot 2023-02-26 at 5.00.55 PM.png

    Here is a CodeSandbox of the whole thing:

    Fullscreen: https://siuqo3-3000.preview.csb.app/, Code

    ScrollProxy with Locomotive & Nextjs

    in GSAP

    Posted

    Hey @GreenSock, thanks for your response! I'm a little confused by your demo because for me nothing is happening. 984120663_Screenshot2023-01-14at9_37_15PM.thumb.png.be72b455c902268d503fa44ad645ff38.png

     

    Maybe I should have clarified a bit better. When we get to the quotes, I want them to move horizontally until the end of the container before further moving down on the page (see below). In my demo, the do move right to left but disappear at start and reappear after end. In your demo, the start marker appears to be fixed as well and therefore does not have any effect on my animation.

     

    414626533_Screenshot2023-01-14at9_40_37PM.thumb.png.1264ae4b0c5a442f0db275aefd8dc26d.png

    React pinned object disappear on start to end

    in GSAP

    Posted

    @akapowl I'm having the same issue. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock: 

    See the Pen ExPdqKy by GreenSock (@GreenSock) on CodePen

     

     

    I cannot get it to work though, my content keeps disappearing. Here is a minimal demo:

    https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx

     

    Here is also a link to the final page. At the bottom where it says “Meine Community Über Mich” you can see it disappear and reappear: https://juliaweber-git-preview-inzn.vercel.app

     

    Thanks for your help!

    Scrolltrigger: Background sticky until pin, then fade / relative

    in GSAP

    Posted

    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

    ScrollTrigger - aligning start and end triggers to the same point

    in GSAP

    Posted

    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 

    Screenshot 2022-03-12 at 5.20.07 PM.png

×
×
  • Create New...