Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ddi-web-team

Flip plugin fitChild transition not working smoothly

Go to solution Solved by ddi-web-team,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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;
    }

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×