CAT is CAT

0 I would like to control each image I have in my const imgURLArray, if possible via class or id. If this is only possible via JS, could someone help me or teach me how to do it? I have created a CodePen to see the infinite gallery in action. For example I would like to control img1 via .class on hover each image does have a .sliderImage class I could use. I don't have any other more specific value I can grab. This means that I would have to add something like an id if you needed a specific image, Can somebody help me with this? const imgURLArray = [ "url(img1)", "url(img2)", "url(img3)", "url(img4)", ];

I also would need to change the cursor style to cursor:progress during the black transition but it wont work (newbie), there is an easy solution for that?

Thanks @ZachSaucier, fantastic. Could you show what I should change in this snippet and also how to not mixing ease formatting? function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.to(".loading-screen", { duration: 1, width: "100%", left: "0%", ease: "Expo.easeInOut", }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); Would be very helpful

Hi, I'm new to Gsap & I'm working on page transitions. The idea is to have a transition from the about page and the home page with a centered logo animation, very simple. I click on my button, the transition come in, the logo scale from 0 to 1 and go down fading, great! The first animation work fine but when I clicked again the scale factor is now missing unfortunately... How can i fix this? HERE my codepen: https://codepen.io/cat999/project/editor/AEeEdg