Create a comparison of scrolling sections

[ChildDev]

Hello,
 

I'm just starting to use GSAP.

I'm trying to create a section comparison effect when scrolling.
I have a div containing 3 rather similar sections.
The aim is that, when scrolling, this div is positioned in absolute and only the sections scroll in comparison, like the image below, taken from the site: https://things.morflax.com/

After a lot of searching, I haven't found any similar examples.
 

I hope I've made myself clear and thank you in advance for your help.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[kanguyen-vn]

These different threads all contain pens that implement similar things to what you're trying to accomplish.

 

 

 

 

 

[ChildDev]

Thank you for your answers.

I understand and that's why I managed to reproduce the effect with gsap scrolltrigger using the last thread shown above.

However I have a problem, when starting the trigger, my content goes relatively low, which generates me a big empty hole.

You then have to scroll down and then up again to get the desired effect.

Do you have any ideas about my bug?

Here's the sandbox:
 

https://codesandbox.io/s/heuristic-hooks-jlvjc8

[Cassie]

Heya!

 

So i'd probably pin the same element as the trigger, not a parent.

https://codesandbox.io/s/sweet-bell-mndxkz?file=/src/App.js

Also with React you're going to need to do proper animation cleanup

 useEffect(() => {
    // create a context for all the GSAP animations and ScrollTriggers so we can revert() them in one fell swoop.
    // A context also lets us scope all the selector text to the component (like feeding selector text through component.querySelectorAll(...)) 
    let ctx = gsap.context(() => {
      // create as many GSAP animations and/or ScrollTriggers here as you want...
      gsap.from("h1", { // <- selector text, scoped to this component!
        opacity: 0,
        y: 100,
        ease: "power3",
        duration: 2
      });
    }, component); // <- scopes all selector text inside the context to this component (optional, default is document)
    
    return () => ctx.revert(); // cleanup! 
  }, []);

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

 

Here are some further learning materials-

 

Hope this helps!

[ChildDev]

All right, thank you very much!

 

Indeed, by adding a context for React, it works much better!

 

I've got one last question, I've tried to add a third section, but it doesn't blend in like the second one and so it goes on top.

 

Would this effect be limited to 2 sections that blend together, or is my implementation not correct?

 

I'm sorry, I'm still at the beginner's stage when it comes to gsap, but I have to admit I love what I can do!

 

https://codesandbox.io/s/heuristic-hooks-jlvjc8

[Rodrigo]

Hi,

 

The issue here is not on your ScrollTrigger configuration but in the way you're creating your timeline. I removed the ScrollTrigger config and set the Timeline caught that the error was in the position parameter you were passing to the final instance of your Timeline:

.fromTo(
  section.querySelector(".third-content"),
  { yPercent: -100, y: 0 },
  { yPercent: 0 },
  0 // HERE
);

That basically tells GSAP to put that instance at the start of the timeline, not at the same time the previous one starts, which is what you want. I strongly recommend you to get more familiar with GSAP, Timelines and the position parameter in order to learn how to correctly use it.

 

Here is a fork of your codepen with the position parameter corrected:

https://codesandbox.io/s/fragrant-feather-pl7w5t?file=/src/App.js

 

If you can be sure to check @Carl's great learning resources:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Hopefully this helps.

Happy Tweening!

[ChildDev]

Hi,

 

Thank you very much for your reply. In fact, after reading this page of your documentation position-parameter, I understood how to use gsap timeline correctly, which enabled me to achieve the effect I wanted.

 

Here is the correction I made with your help:

 

tl.fromTo(
          section.querySelector(".second"),
          { yPercent: 100, y: 0 },
          { yPercent: 0 }
        )
          .fromTo(
            section.querySelector(".third"),
            { yPercent: 100, y: 0 },
            { yPercent: 0 },
            ">"
          )
          .fromTo(
            section.querySelector(".second-content"),
            { yPercent: -100, y: 0 },
            { yPercent: 0 },
            0
          )
          .fromTo(
            section.querySelector(".third-content"),
            { yPercent: -100, y: 0 },
            { yPercent: 0 },
            ">"
          );

 

Thank you very much
I wish you all the best
Sincerely

[RobertRobles]

On 7/7/2023 at 12:47 AM, Cassie said:

Heya!

 

So i'd probably pin the same element as the trigger, not a parent.

https://codesandbox.io/s/sweet-bell-mndxkz?file=/src/App.js

Also with React you're going to need to do proper animation cleanup

 useEffect(() => {
    // create a context for all the GSAP animations and ScrollTriggers so we can revert() them in one fell swoop.
    // A context also lets us scope all the selector text to the component (like feeding selector text through component.querySelectorAll(...)) 
    let ctx = gsap.context(() => {
      // create as many GSAP animations and/or ScrollTriggers here as you want...
      gsap.from("h1", { // <- selector text, scoped to this component!
        opacity: 0,
        y: 100,
        ease: "power3",
        duration: 2
      });
    }, component); // <- scopes all selector text inside the context to this component (optional, default is document)
    
    return () => ctx.revert(); // cleanup! 
  }, []);

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

 

Here are some further learning materials-

 

Hope this helps!

Thank you Cassie, you are the best person over here