next.js Fixing, scroll and animation

[noob1337]

Hey! How to fix the first block and raise the second block when scrolling? When the second block completely overlaps the first, should the standard content be displayed? How can I make a point in the middle so that it also increases smoothly when scrolling?

 

https://codesandbox.io/p/sandbox/reverent-drake-937d9k

 

https://www.depo.studio/

See the Pen reverent-drake-937d9k by p (@p) on CodePen

[Rodrigo]

Hi @noob1337 and welcome to the GSAP forums!

 

I see that you are using React but you're not using GSAP Context. When working with React GSAP Context is your best friend:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

This seems to work in the way you intend:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to(section2Ref.current, {
      scrollTrigger: {
        trigger: section2Ref.current,
        pin: true,
        pinSpacing: false,
        start: "top top",
        end: "bottom top",
        markers: true,
        id: "hero",
      },
    });
  });
  return () => ctx.revert();
}, []);

Also you need to add postion relative to the elements after the one you pinned in order to have them scroll over the one you pinned.

 

Finally take a look at the resources in this page:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

[noob1337]

13 hours ago, Rodrigo said:

Hi @noob1337 and welcome to the GSAP forums!

 

I see that you are using React but you're not using GSAP Context. When working with React GSAP Context is your best friend:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

This seems to work in the way you intend:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to(section2Ref.current, {
      scrollTrigger: {
        trigger: section2Ref.current,
        pin: true,
        pinSpacing: false,
        start: "top top",
        end: "bottom top",
        markers: true,
        id: "hero",
      },
    });
  });
  return () => ctx.revert();
}, []);

Also you need to add postion relative to the elements after the one you pinned in order to have them scroll over the one you pinned.

 

Finally take a look at the resources in this page:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

Great! I managed to do it with your help! But I don't quite understand how the start and end of a trigger works... For example, I managed to increase the size, but if I go back, the size does not decrease. I've tried different start and end values, but my options don't work.

https://codesandbox.io/p/sandbox/reverent-drake-937d9k

How it works?
 

[Rodrigo]

Hi,

 

You are looking at either scrub or toggleActions. From the ScrollTrigger docs:

 

scrub

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

• Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
• Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

gsap.to(section2Ref.current, {
  width: "100%",
  scrollTrigger: {
    trigger: section2Ref.current,
    start: "top 80%",
    end: "top top",
    scrub: true,
    markers: true,
    id: "hero2",
  },
});

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

gsap.to(section2Ref.current, {
  width: "100%",
  scrollTrigger: {
    trigger: section2Ref.current,
    start: "top 80%",
    end: "top top",
    toggleActions: "play none reverse reset",
    markers: true,
    id: "hero2",
  },
});

 

Hopefully this helps.

Happy Tweening!