Jump to content
Search Community

Section with rows fading in each other.

DylanDold test
Moderator Tag

Recommended Posts

https://cloud.movavi.com/play/3c84a61c-32e4-498b-b514-07d74585fb02

 

So my structure is the following:

  • .sectie-branding (section)
    • .branding-row .et_pb_row
    • .website-row .et_pb_row
    • .activatie-row .et_pb_row

This is my gsap:

gsap.registerPlugin(ScrollTrigger);

const rows = gsap.utils.toArray('.sectie-branding .et_pb_row');

gsap.to(rows, {
  opacity: 1,  // Fade in the rows
  ease: "none",
  scrollTrigger: {
    trigger: '.sectie-branding', // Target the branding section
    start: "top top", // Start when the section hits the top of the viewport
    end: "bottom top", // End when the bottom of the section hits the top
    scrub: true, // Smooth scroll interaction
    pin: true, // Pin the section during the scroll
    anticipatePin: 1, // Adjust pin behavior for smoother experience
    onUpdate: self => {
      // Loop through each row and calculate visibility based on progress
      const totalScroll = rows.length;
      const progress = self.progress * totalScroll; // Get scroll progress based on the number of rows
      
      rows.forEach((row, i) => {
        const rowProgress = progress - i; // Calculate how far we are from this specific row
        gsap.to(row, { opacity: 1 - Math.abs(rowProgress), duration: 0.5 }); // Fade in/out based on progress
      });
    }
  }
});

This is my css:

.sectie-branding {
max-height: 300vh;
  position: relative;
  height: 300vh; /* Simulates scrolling for 3 sections */
  overflow: hidden; /* Prevents overflow outside the section */
}

.sectie-branding .et_pb_row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Each row fills one full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.sectie-branding .et_pb_row.active {
  opacity: 1;
}

But as u can see in the video, it looks like its inserting another 300vh section right after u scroll out of the last row causing an huge black-space.

Link to comment
Share on other sites

Hi @DylanDold welcome to the forum!

 

Sounds like you just don't want to fade out the last slide? Your setup seems really complicated for how simple this effect is. In GSAP everything starts with an animation and after that you can add ScrollTrigger to the mix to see how your animation is working on scroll. It looks like you reversed the logic eg you started with scrolling and after that added the animation, this will make everything so much more complicated than it has to be. 

 

I've written a post on how you can make these kinds of effects and what the logic is behind them, see below: 

 

With that logic it allowed me to make this, which was just a question of updating the tweens to animate the opacity. As you can see the code is so much more simpler and shows you what you can do when you start with an animation before you even think about ScrollTrigger. 

 

Hoop dat het helpt en veel geluk met je project!

 

See the Pen XWLGEKJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

13 minutes ago, mvaneijgen said:

Hi @DylanDold welcome to the forum!

 

Sounds like you just don't want to fade out the last slide? Your setup seems really complicated for how simple this effect is. In GSAP everything starts with an animation and after that you can add ScrollTrigger to the mix to see how your animation is working on scroll. It looks like you reversed the logic eg you started with scrolling and after that added the animation, this will make everything so much more complicated than it has to be. 

 

I've written a post on how you can make these kinds of effects and what the logic is behind them, see below: 

 

With that logic it allowed me to make this, which was just a question of updating the tweens to animate the opacity. As you can see the code is so much more simpler and shows you what you can do when you start with an animation before you even think about ScrollTrigger. 

 

Hoop dat het helpt en veel geluk met je project!

 

 

 

Thanks for the kind words! But i just cannot get it to work :(

Link to comment
Share on other sites

20 minutes ago, mvaneijgen said:

No worries, just create a minimal demo on something like Codepen with your setup and we'll be happy to take a look at your setup. Keep in mind CSS is really important when working with GSAP and your current CSS doesn't work with this setup.

Thanks: 

See the Pen mdZoxvj by Dylan-Doldersum (@Dylan-Doldersum) on CodePen

The colors are normally background-images. But for the sake of the simple snippet ive made it a color.

Link to comment
Share on other sites

4 minutes ago, mvaneijgen said:

What exactly is not working? As I said CSS is really importent, please check my post it explains everything you need. I've just add some CSS Grid logic to . sectie-branding and everything works 🤷

 

 

 

Thanks but what im trying to achieve is, like in the video. When scrolling, but last row in the section gives alot of blackspace i assume because of the pin:true creating a clone. I think we missunderstand each other. Its all happening while scrolling through.

Link to comment
Share on other sites

That is because the ScrollTrigger is commented out enable it and it works as you expect!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I highly recommend reading the code you copy and paste from the internet and try to understand what it is doing, that way you learn what is what, if you just blindly copy things it will be hard to get a feel for what it is doing.

 

See the Pen JjQzvbp by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...