Animation is broken when using it in foreach loop

[Asored]

Hi guys! I'm really in love with Gsap and want to use it for my future projects. I'm sure I'll join the Business Membership. Awesome work.

Since I'm still in the getting-to-know phase, I may have a question that I'm sure seems obvious to you.

 

I try to animate a typical Flip Card with a gsap timeline. Works like a charm! But: When more then one elements / cards are on the page and I create a loop (in my case with the gsap util toArray.forEach), the animation seems to be broken. No error messages in the console, each element can be found by gsap. So I don't know where is the problem here. For some reason the back of the card is going to be white.

 

When realizing that without foreach and directly with one element, everything works. What's the error here? Did I misunderstood some important concepts? Wish you a great weekend!

 

See the Pen NWMaZXG?editors=0110 by asored (@asored) on CodePen

[Rodrigo]

Hi @Asored,

 

The main issue seems to be that the back face is rotating as well inside the wrapper. In this cases I feel that is always better to rotate both faces instead of the container. This setup seems to work IMHO:

gsap.utils.toArray('.inner').forEach(flip => {
    
  let wrapper = flip;
  let box = wrapper.querySelector(".box");
  let front = wrapper.querySelector('.front');
  let back = wrapper.querySelector('.back');

  gsap.set(wrapper, {
    transformStyle: "preserve-3d",
    transformPerspective: 1000
  });
  gsap.set(back, {
    rotationX: -180
  });

  const timing = 1;

  const tl = gsap.timeline({ paused: true })
  .to(wrapper, { scale: 1, duration: timing }, 0)
  .to(front, { rotationX: 180, duration: timing }, 0.5)
  .to(back, { rotationX: 0, duration: timing }, 0.5)
  .to(wrapper, { z: 50, duration: timing/2, yoyo: true, repeat: 1 }, 0);

  flip.addEventListener("mouseover", event => {
    tl.play();
  });
  flip.addEventListener("mouseleave", event => {
    tl.reverse();
  });
})

Hopefully this works as you expect. Let us know if there's any other question regarding GSAP.

 

Happy Tweening!!!

[Asored]

26 minutes ago, Rodrigo said:

Hi @Asored,

 

The main issue seems to be that the back face is rotating as well inside the wrapper. In this cases I feel that is always better to rotate both faces instead of the container. This setup seems to work IMHO:

gsap.utils.toArray('.inner').forEach(flip => {
    
  let wrapper = flip;
  let box = wrapper.querySelector(".box");
  let front = wrapper.querySelector('.front');
  let back = wrapper.querySelector('.back');

  gsap.set(wrapper, {
    transformStyle: "preserve-3d",
    transformPerspective: 1000
  });
  gsap.set(back, {
    rotationX: -180
  });

  const timing = 1;

  const tl = gsap.timeline({ paused: true })
  .to(wrapper, { scale: 1, duration: timing }, 0)
  .to(front, { rotationX: 180, duration: timing }, 0.5)
  .to(back, { rotationX: 0, duration: timing }, 0.5)
  .to(wrapper, { z: 50, duration: timing/2, yoyo: true, repeat: 1 }, 0);

  flip.addEventListener("mouseover", event => {
    tl.play();
  });
  flip.addEventListener("mouseleave", event => {
    tl.reverse();
  });
})

Hopefully this works as you expect. Let us know if there's any other question regarding GSAP.

 

Happy Tweening!!!

 

Great, thanks very mich, Rodrigo! I really appreciate your help. It works well animating only the children.

There is just another issue. In the system I need to integrate this animation currently is a small bug. The DomContentLoaded eventListener fires three times. I can't change this behavior and I need to play with it.

 

Firering the page three times seems to be a problem for the tl.reverse(). The reverse animation stops until finishing. Is there a way to say: "Hey! Please ignore other requests and animate only once"?