Cycling images (fade or swipe)

[popland]

I have a list of images (i know the number before starting the animation), and i'm trying to fade (or even swipe, at the momenti dont care, i just need to find a solid way to pass from an image to another) between them in continous loop.

i tried with something like this

vat tl=gsap.timeline();
tl.set(imgObj[0], { opacity: 1 }); //so the first image is immediatly showed
function objani() {
        var otl = gsap.timeline();
        otl
          .to(imgObj, {
            duration: 2,
            opacity: 1,
            ease: 'power4.inOut',
          })
          .to(imgObj, {
            delay: 5,
            duration: 1,
            opacity: 0,
            ease: 'power4.inOut',
          })
        return otl;
      }
      tl.add(objani()).repeat(-1);

but, of course, all the images animatio are executed together

any suggestion on how to stagger a list of something, maybe removing the first .to for the first image and at the end continue seamlessly to first?

fade is just a placeholde, the image could swap with zoom or swipe or any other transition

[mikel]

Hey @popland,

 

Does this concept fit?

 

See the Pen rNVEYVj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[popland]

it looks like a starting point, but on my side its not working (im sorry i can't make a codepen but the images come from a graphql and the code is a bit 'complex')

my images are (sometimes) different in sizes and it looks the fade between them jumps around in timing, sometime looks the correct time, sometimes looks faster, sometimes the bigger image keep staying under the small one fading in without fading out.

 

it looks like the main problem is the restarting point, all the images are positioned absolute piled one over the other (and that is correct), but at the end, the last image sit over the first, so the fade effect gets weird, for example if the fade out is longer that the fade in during the whole procedure it works correctly (new image appear over fast, the back one slowly disappear), but when reverting to start the appering one is behind the disappearing, so if it disappear slow it keeps showing over

[mikel]

Hey @popland,

 

Without seeing your case, it is not possible to give a hint or a recommendation.

 

Good luck ,,,

Mikel

[ZachSaucier]

As mikel said, please create a minimal demo if you'd like debugging help, making sure to strip all of the parts that aren't related to your question.

[popland]

i understand that, and  i alwasy did when i was in search for some help

unlucky this time my "problem" is inside a nested component of a big gatsby project, and exctracting the part, would cost hours, anyway i'pretty sure of what my problem is; as i said in my previous post it's not an animation problem, the fact is that 10 images positioned absolute one over the other have a different behaviour whan you pass from the one blow to the one above, but once you reach the end to restart you have to pass from the one above to the one below (and this appear seamless only in certain condition. like constant animation between the one who come and the one who go, having bothi image of the same measure, and more)