Flip in images multiple delays needed

[kodralex]

Hi,

 

So I have some images that are flipping in when you scroll down the page. This all works fine. But I would like to delay some of the images so they don't all flip in at the same time. In my CodePen demo, there are only three images; in my development site, there may be 20/30+ images. So I need an easy(ish) solution. Could I maybe add a data-delay attribute to the element div and set a delay amount this way? Anyone got any ideas on the best way for me to approach this?

 

Thanks,

Alex

See the Pen LYgjOdW by alexkodr (@alexkodr) on CodePen

[alig01]

Hey, the easiest solution would be to use stagger. It works like an offset for the starting time of each element. 

Check out the docs there is an interactive demo that can show you the possibilities.

 

See the Pen jOeLYWE?editors=0010 by alig01 (@alig01) on CodePen

 

Also no need to use fromTo, if you want to get to the initial position. And I added to your .element class visibility: hidden in the css to avoid fouc.

 

Hope this helps and good luck with your project.

[kodralex]

@alig01 Perfect, thank you. This is exactly why I love this forum. I tend to try and overcomplicate a problem when there is a much simpler solution, and the stagger will work great. Also, thanks for the heads up on the 'fouc'. That is really good to know.

[kodralex]

Hi all,

 

Just coming back to this one. I've come across a few further bits I need help with. So In my updated CodePen, I have multiple images that are being animated. Each set of images is inside its own .container div, which is the trigger. But I will have many of these on the page. After a little reading around, it would seem I use something like this

 

gsap.utils.toArray(".container").forEach((container) => {

But it's not behaving how I want it. What am I missing here?

 

The next issue is with the animation itself. I'm trying to mimic the animation on the panels on this page: https://www.playmakerstudio.com/lifestyle/. The panel has a slight verticle flip when coming onto the page (it's not distorted). I've tried to reproduce this using perspective (see my CodePen). But I can see this isn't exactly right. On my GSAP version, the images are distorted. I think they should be rotated slightly on an axis rather than a perspective shift. Has anyone got any ideas?

[Rodrigo]

Hi,

 

The problem is just a selector logic issue. Right now you have this on your loop:

gsap.from(".element",  {
  scrollTrigger: {
    trigger: container,
    scrub: 1,
    start: "top center",
    end: "bottom bottom",
    markers: true
  },
  //autoAlpha: 0,
  rotationX: -10,
  stagger: {
    grid: [3, 3],
    from: "random",
    amount: 1.5
  }
});

So basically for every container you're selecting all the DOM nodes with the class ".element" from every container. What you need to do is target the nodes with that class that are children of the specific container:

gsap.utils.toArray(".container").forEach((container) => {
  const elements = container.querySelectorAll(".element");
  gsap.from(elements, {
    scrollTrigger: {
      trigger: container,
      scrub: 1,
      start: "top center",
      end: "bottom bottom",
      markers: true
    },
    //autoAlpha: 0,
    rotationX: -10,
    stagger: {
      grid: [1, 3],
      from: "random",
      amount: 1.5
    }
  });
});

Here is a fork of your codepen:

See the Pen xxyXVeo by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[kodralex]

Perfect. Thanks for explaining. The animation I figured this out using a combination of rotationX and translateY.