responsive Fade-In Boxes in a row

[emjay]

Hi Folks,

 

in the following pen I have a 6 boxes in a row, and I want to fade-in a certain number of boxes at the same time, as long the breakpoint that show's all at the same time isn't reached.

 

My example works, but I have the feeling to have overcomplicated it. Can you take a look at it and tell me if there is a way to improve it?

I would have loved to work with stagger, but couldn't find a way to use it.

Thanks,
Martin

See the Pen 6c9c60629707be4b5152bd44082b721e by emjay (@emjay) on CodePen.

[ZachSaucier]

Hey emjay. The only recommendation that I have is to just use a helper function (replace your JS with this):

const images = gsap.utils.toArray(".facts div");
const duration = 1;
const pause = .5;
const delay = 1;
const stepDuration = duration + pause + duration + pause;

ScrollTrigger.saveStyles(".facts div");

function createAnim(numPerRow) {
  let step = 0;
  let imagesTL = gsap.timeline({ duration: 1, repeat: -1, paused: true });

  images.forEach((image, i) => {
    if( i % numPerRow == 0 ) {
      show = (step * stepDuration) + (step * pause);
      hide = show + pause + duration;
      step++;
    }

    imagesTL.from(image, { autoAlpha: 0, y: 10 }, show ); // Show image
    imagesTL.to(image, { autoAlpha: 0, y: 10 }, hide ); // hide image
  });

  ScrollTrigger.create({
    trigger: '.facts',
    animation: imagesTL,
    start: "top bottom",
    end: "bottom top",
    toggleActions: "play pause play pause",
    markers: true
  });
}

ScrollTrigger.matchMedia({
  "(min-width: 320px) and (max-width: 900px)": function() {
    createAnim(1);
  },
  "(min-width: 901px) and (max-width: 1200px)": function() {
    createAnim(2);
  },
  "(min-width: 1201px) and (max-width: 1400px)": function() {
    createAnim(3);
  }
});

Besides that you did a great job!

[emjay]

Hi @ZachSaucier,

 

thanks for your tips for simplification. This makes everything look even clearer and easier to understand.

I have updated the pen, so that other people can benefit from it too.

 

Thanks and all the best

Martin

[ZachSaucier]

6 hours ago, emjay said:

I have updated the pen, so that other people can benefit from it too.

Thanks for wanting to do that but it's actually best if you leave the old version up there for context in these forums. Then you can make a fork (there's a button in CodePen named "fork") to show the working version and post that in a follow up comment here