emjay Posted October 8, 2020 Share Posted October 8, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 8, 2020 Share Posted October 8, 2020 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! 2 Link to comment Share on other sites More sharing options...
emjay Posted October 9, 2020 Author Share Posted October 9, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 9, 2020 Share Posted October 9, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now