Animation is broken when using it in foreach loop
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. N
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-3