react.js How to make a horizontal scroll when another animation has completed?

[noob1337]

Hey!
I want the behavior to be similar to the one in the video.
I use the onComplete method to understand when the circle has increased and horizontal scrolling should work for me.
Since mine is a circle shape, I think it would be correct to hide the circle shape and display a container with the same color.
In this container, set the width of the first child to 100% and the width of the other to 50%.
As you scroll, reduce the width of the first child element to 50%.

How to do this correctly? I don't quite understand how to do this correctly.

Tell me, how can I catch the middle of the animation in order to display the text? For example, the circle enlarged a little and the text was gradually displayed; for example, you can also see it in the video.

It is also not clear to me how to determine the start and end in this code to trigger the horizontal scroll. I specified start and end, but I think that's wrong for what I need.

I would like to get a comment on how to create a similar sequence for animation.

I believe that it will be enough for me to suggest how to correctly implement horizontal behavior after performing an animation with a circle and simply display the container and I will try to understand how to further connect this chain and I will independently try to change the width for the next animations, and I would also like to get an answer, How can you correctly display text there in the middle of the circle enlargement animation?

 

 

 

See the Pen NWeQyZp?editors=1111 by ogneog (@ogneog) on CodePen

[Rodrigo]

Hi,

 

I think you are overcomplicating this. There is no need IMHO to create such convoluted setup, just create a single timeline that first animates the entire's section clip-path property and then creates the horizontal animation. Something like this:

 

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

 

Hopefully this helps.

Happy Tweening!

[noob1337]

13 hours ago, Rodrigo said:

Hi,

 

I think you are overcomplicating this. There is no need IMHO to create such convoluted setup, just create a single timeline that first animates the entire's section clip-path property and then creates the horizontal animation. Something like this:

 

 

 

 

Hopefully this helps.

Happy Tweening!

 

 

Great! But i cant use this example for Nextjs, becouse im getting incorrect animation.
Please, check it: https://codesandbox.io/p/sandbox/beautiful-newton-2knvth

If I go down to the very end and come back, the animation works...

[Rodrigo]

Hi,

 

The issue is that your layoutEffect doesn't have a dependencies array, so it runs every time the component is rendered:

useLayoutEffect(() => {
}, []);// -> Emtpy dependecies array

Also you are not doing proper cleanup in the return function of your effect hook:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {});
  return () => ctx.revert(); // <- Cleanup!!
}, []);

This seems to work:

useLayoutEffect(() => {
  const panels = panelsRefs.map((ref) => ref.current);
  const totalPanels = panels.length;

  const ctx = gsap.context(() => {
    gsap
      .timeline({
      scrollTrigger: {
        trigger: wrapRef.current,
        start: "top top",
        end: "+=" + (100 * totalPanels + 1) + "%",
        scrub: true,
        pin: true,
        markers: {
          startColor: "white",
          endColor: "white",
        },
      },
    })
      .to(wrapRef.current, {
      clipPath: "circle(71% at 50% 50%)",
      duration: 1 / totalPanels,
    })
      .to(panels, {
      xPercent: -100 * (totalPanels - 1),
      duration: 1,
      ease: "none",
    });
  });
  return () => ctx.revert();
}, []);

Finally take a look at the resources in this page in order to learn how to use GSAP in React/Next projects:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

[noob1337]

2 hours ago, Rodrigo said:

Hi,

 

The issue is that your layoutEffect doesn't have a dependencies array, so it runs every time the component is rendered:

useLayoutEffect(() => {
}, []);// -> Emtpy dependecies array

Also you are not doing proper cleanup in the return function of your effect hook:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {});
  return () => ctx.revert(); // <- Cleanup!!
}, []);

This seems to work:

useLayoutEffect(() => {
  const panels = panelsRefs.map((ref) => ref.current);
  const totalPanels = panels.length;

  const ctx = gsap.context(() => {
    gsap
      .timeline({
      scrollTrigger: {
        trigger: wrapRef.current,
        start: "top top",
        end: "+=" + (100 * totalPanels + 1) + "%",
        scrub: true,
        pin: true,
        markers: {
          startColor: "white",
          endColor: "white",
        },
      },
    })
      .to(wrapRef.current, {
      clipPath: "circle(71% at 50% 50%)",
      duration: 1 / totalPanels,
    })
      .to(panels, {
      xPercent: -100 * (totalPanels - 1),
      duration: 1,
      ease: "none",
    });
  });
  return () => ctx.revert();
}, []);

Finally take a look at the resources in this page in order to learn how to use GSAP in React/Next projects:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!

 

Great!!! THANK YOU