[GSAP infinite gallery – How to control each images i have in a const imgURLArray via CSS]

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)",
  ];

 

See the Pen rNvdrNb by cat999 (@cat999) on CodePen

[Page transitions: GSAP animation work perfectly only the first time... How to fix this?]

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? 

[Page transitions: GSAP animation work perfectly only the first time... How to fix this?]

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

[Page transitions: GSAP animation work perfectly only the first time... How to fix this?]

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

See the Pen AEeEdg by cat999 (@cat999) on CodePen