Flip plugin fitChild transition not working smoothly

[ddi-web-team 13 Likes (Newbie)]

Hello. 

I'm trying to make my own flip demo that is very similar to this example. 

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

The issue that I'm coming across is with the closeHeadshot() function. 
When closing, the expanded headshot starts to move back into the correct place, but near the end, it jumps back to place and doesn't animate nicely. 

 

I'm not sure what's causing this and why it doesn't close as smoothly as it opens. 

See the Pen ad54f2ec28debf383561fc9b007fe9c1?editors=0010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

[ddi-web-team 13 Likes (Newbie)]

I realized that my issue was because of conflicting tweens. In the closing function, I was changing the opacity of the card being flipped before it had a chance to finish it's animation. I've updated the function like this. 

 

    function closeHeadshot(){
        document.removeEventListener('click', closeHeadshot);

        //Record current state
        const state = Flip.getState(expandedContainer);

        //Scale details down so that it's image fits exactly on top of the active headshot
        Flip.fit(expandedContainer, activeHeadshot.querySelector('img'), {scale: true, fitChild: expandedImage});

        //Put the bio container back and then fade in the other headshots
        
        const tl = gsap.timeline();
        tl.to(expandedBioContainer, {xPercent: 15, opacity: 0})
          //.to(expandedContainer, {visibility: 'hidden'})
          .to(headshots, {opacity:1, stagger: {amount: 0.7, from: headshots.indexOf(activeHeadshot), grid: 'auto'}}, 0);
          

        Flip.from(state, {
            scale: true,
            duration: .5,
            delay: 0.2,
            ease: "power2.inOut",
            absolute: true
        }).to(expandedContainer, {visibility: 'hidden'})

        activeHeadshot = null;
    }