Gsap Set Opacity to 1 when Pinned transition is complete but keep the pinned component as it is till opacity transition done.

[Kiran M]

Hello all,

I am trying to create an effect like,

 

1. First pinned the left description, till the image component (right side) is scrolled till the left component at top
2. Then set opacity to 1 for "Yes, Hello" component, keeping the left and right component as it is till the opacity become 1 with duration set

I am able to do the first transition but "yes, hello" block is scrolling before the first transition yet to complete, I have created the demo for reference.

 

https://stackblitz.com/edit/stackblitz-starters-2yb1kq?file=app%2Fcomponents%2FMainTransition.tsx

 

Thank you in advance

[GSAP Helper]

I read your description at least 4 times and I'm still confused, sorry. Are you trying to pin the "yes, hello" along with the left content? Why not put it inside of that or something? What do you mean "keep left and right component as is..." - pinned? 

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically..." - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin both the left side and the 'yes, hello' component at the same time?" Keep your Stackblitz focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[Kiran M]

Hi,

I will try to define my problem statement in following steps, I have uploaded the images as well for better understanding

1. Main transition section (only left part) will scroll up and settle at top (pinned), please refer to step-1.jpg
2. Right image will be scrolled up till left part, please refer to step-2.jpg and step-3.jpg
3. When the above transition done, then "Yes, Hello" will appear at centre of the page, please refer to step-4.jpg 
4. one the "Yes, hello" appears then all these will scroll up together, please refer to step-5.jpg 

[GreenSock]

You mean like this?: 

  useGSAP(() => {
      gsap.set('.yesBlocl', { opacity: 0 });

      gsap.to('.yesBlocl', { 
        opacity: 1,
        ease: "none",
        scrollTrigger: {
          trigger: '.main-left',
          scrub: true,
          pin: ".yesBlocl",
          start: 'top 30%',
          end: 'bottom 32%',
          id: 'left-text',
          // markers: true,
        },
      });

      ScrollTrigger.create({
        trigger: ".main-left",
        pin: true,
        start: "top 30%",
        end: "bottom 32%",
        pinSpacing: false
      })
}, { scope: mainRef });

https://stackblitz.com/edit/stackblitz-starters-vu1eq8?file=app%2Fcomponents%2FMainTransition.tsx

 

[Kiran M]

Hi @GreenSock only yes block needs to show once right hand side image is fully scrolled to main-left block. Can you please refer to image 3 and 4, right now on scroll both yes block and image are transitioned simultaneously which is not the case

[GreenSock]

You mean like this?: 

useGSAP(() => {
    gsap.set('.yesBlocl', { opacity: 0 });

    let st = ScrollTrigger.create({
      trigger: ".main-left",
      pin: true,
      start: "top 30%",
      end: "bottom 32%",
      pinSpacing: false
    });
    ScrollTrigger.create({
      trigger: ".main-left",
      pin: ".yesBlocl",
      start: "top 30%",
      end: "bottom 32%",
    });

    gsap.to('.yesBlocl', { 
      opacity: 1,
      ease: "none",
      scrollTrigger: {
        trigger: '.main-left',
        scrub: true,
        start: () => st.end,
        end: "+=200",
      },
    });
  }, { scope: mainRef });

https://stackblitz.com/edit/stackblitz-starters-xft7af?file=app%2Fcomponents%2FMainTransition.tsx

 

Please keep in mind that these forums aren't really intended to be a place where people place a list of requirements and then have us build it to their specifications, but we're happy to give you a nudge in the right direction and answer GSAP-specific questions (like about the API). I hope this helps you grasp the fundamentals so you can tweak it to be exactly the way you'd like.

 

Good luck! 👍  

[Kiran M]

@GreenSock this is the one. Thank you. I had tried lot of iteration but no luck with final solution. Thank you again

[GreenSock]

Super. I'm glad it worked out. Have fun!