Flip animation from display block to none

[Bartholomey]

Hello,

I'm playing around with the Flip plugin and I would like to ask how can I animate element going from display: block to display: none.

I have a simple app that displays list of recipe cards. When I click on any card, layout of the card adjusts:

• Image on the bottom of the card slightly increases its height
• Description above the image appears (from display: none to display: block)

When I click on the card again it goes to the original state - the layout adjusts:

•  Image decreases its height
• Description disappears (display: block to display: none)

Everything animates smoothly on the card open animation but on close, the description just instantly disappears without any transition and then the layout adjusts.

How can I animate the description on close so it does simple fade animation (e. g. the opposite of what it does on open)? 

Here is function that handles the animation. I'm using xstate state machine to handle state of the card but it is not related.
 

function handleCardAnimation(recipeCard) {
    const recipeCardStateMachine = createMachine({
        id: 'toggle',
        initial: 'closed',
        states: {
            closed: {
                on: { toggle: 'open' },
            },
            open: {
                on: { toggle: 'closed' },
            },
        },
    });

    const recipeCardStateActor = createActor(recipeCardStateMachine);

    recipeCardStateActor.subscribe((snapshot) => {
        const description = recipeCard.querySelector('.js-card-description');
        const image = recipeCard.querySelector('.js-card-image');
        const state = Flip.getState([recipeCard, image, description])

        if (snapshot.value === 'open') {
            description.classList.remove('d-none');
            image.classList.replace('recipe-card-image-height-closed', 'recipe-card-image-height-open');
        } else {
            description.classList.add('d-none');
            image.classList.replace('recipe-card-image-height-open', 'recipe-card-image-height-closed');
        }

        Flip.from(state, {
            ease: "power1.inOut",
            duration: 0.4,
            onEnter: elements => gsap.fromTo(
                elements,
                {opacity: 0, scale: 0},
                {opacity: 1, scale: 1},
            ),
        });
    });

    recipeCardStateActor.start();

    recipeCard.addEventListener('click', () => {
        recipeCardStateActor.send({ type: 'toggle' })
    });
}

[Bartholomey]

Update: Still can not manage to figure this one out. I updated the code and tried to set onLeave callback and absoluteOnLeave but it does not do anything new.

 

import { gsap } from "gsap";
import { Flip } from "gsap/Flip";
import {createMachine, createActor} from 'xstate';

gsap.registerPlugin(Flip);

const recipeCards = document.querySelectorAll('.js-recipe-card');

recipeCards.forEach((recipeCard) => {
    handleCardAnimation(recipeCard);
})

function handleCardAnimation(recipeCard) {
    const cardStateMachineConf = {
        id: 'toggle',
        initial: 'idle',
        states: {
            idle: {
                on: { toggle: 'open' },
            },
            closed: {
                on: { toggle: 'open' },
                entry: ['handleClose'],
            },
            open: {
                on: { toggle: 'closed' },
                entry: ['handleOpen'],
            },
        },
    };

    const cardStateMachineImpl = {
        actions: {
            handleClose: () => handleCloseAnimation(),
            handleOpen: () => handleOpenAnimation(),
        }
    }

    const recipeCardStateMachine = createMachine(cardStateMachineConf, cardStateMachineImpl);
    const recipeCardStateActor = createActor(recipeCardStateMachine);

    recipeCardStateActor.start();

    recipeCard.addEventListener('click', () => {
        recipeCardStateActor.send({ type: 'toggle' });
    });

    function handleOpenAnimation() {
        const description = recipeCard.querySelector('.js-card-description');
        const image = recipeCard.querySelector('.js-card-image');
        const state = Flip.getState([recipeCard, image, description]);

        description.classList.remove('d-none');
        image.classList.replace('recipe-card-image-height-closed', 'recipe-card-image-height-open');

        Flip.from(state, {
            ease: "power1.inOut",
            duration: 0.4,
            onEnter: elements => gsap.fromTo(
                elements,
                {opacity: 0, scale: 0},
                {opacity: 1, scale: 1},
            ),
        });
    }

    function handleCloseAnimation() {
        const description = recipeCard.querySelector('.js-card-description');
        const image = recipeCard.querySelector('.js-card-image');
        const state = Flip.getState([recipeCard, image, description])

        description.classList.add('d-none');
        image.classList.replace('recipe-card-image-height-open', 'recipe-card-image-height-closed');

        Flip.from(state, {
            ease: "power1.inOut",
            duration: 0.4,
            absoluteOnLeave: true,
            onLeave: elements => gsap.fromTo(
                elements,
                {opacity: 1, scale: 1},
                {opacity: 0, scale: 0},
            ),
        });
    }
}

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Bartholomey]

@GSAP Helper Hello, thank you for the reply, I created simple code pen here

See the Pen MWdGGOR by B4rt-_ (@B4rt-_) on CodePen

 where you can see the issues with the text not leaving smoothly. Thank you.

[Rodrigo]

Hi,

 

The main problem is in the d-none class you're using, since it has !important in it, if you remove that it works the way you expect.

 

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Bartholomey]

@Rodrigo Hi, that was the problem! Thank you so much, this would take ages for me to figure it out.