[How to animate automated height width or position change?]

is there any way to animated automated layout animation...? What i mean by automated layout aniation is assume you hav a div that contain two div of height 250 and width 250. now i remove one of the div and for that the height of the parent div got changed and i want to animate that height or width chnage...

[Invalid property morphSVG in React]

So sad that I didn't saw that... BTW Can you please tell me now why this morphing doesn't do anything when i target the morphed version of svg backword...?

switchNavigationWindow is now looking like this..:

switchNavigationWindow = (event) => {
    if (this.state.menuOpen) {
        MenuTimeline.to(this.MenuCloseIconSVG.current, 0.5, {
            morphSVG: this.MenuOpenIconSVG.current
        }).to([this.Menu.current, this.MenuBackDiv.current], 1, {
            height: '0',
            ease: 'power3.inOut',
            skewY: 2,
            stagger: 0.05,
        }, '-= 0.5');

        this.setState({menuOpen: !this.state.menuOpen});
    }
    else {
        MenuTimeline.to(this.MenuOpenIconSVG.current, 0.5, {
            morphSVG: this.MenuCloseIconSVG.current
        }).to([this.MenuBackDiv.current, this.Menu.current], 1, {
            height: '100%',
            ease: 'power3.inOut',
            skewY: -2,
            stagger: 0.05,
        }, '-= 0.5');

        this.setState({menuOpen: !this.state.menuOpen});
    }
}

[Invalid property morphSVG in React]

I am getting Invalid property morphSVG set to <svg>.......</svg> Even Though i have registerd the plugin using Gsap.registerPlugin(DrawSVGPlugin)

 

Here is my Full Code.

 

import React, { Component, createRef } from 'react';

import Gsap from 'gsap';
import DrawSVGPlugin from 'gsap/DrawSVGPlugin';

import NavigationStyler from './Navigation.module.scss';

const MenuTimeline = Gsap.timeline();

class Navigation extends Component {
    constructor(props) {
        super(props);
        this.MenuBackDiv = createRef();
        this.Menu = createRef();
        this.MenuOpenIconSVG = createRef();
        this.MenuCloseIconSVG = createRef();
        this.state = {
            menuOpen: false
        }
    }

    componentDidMount() {
        Gsap.registerPlugin(DrawSVGPlugin);
    }

    switchNavigationWindow = (event) => {
        if (this.state.menuOpen) {
            MenuTimeline.to([this.Menu.current, this.MenuBackDiv.current], 1, {
                height: '0',
                ease: 'power3.inOut',
                stagger: 0.1,
            });

            this.setState({menuOpen: !this.state.menuOpen});
        }
        else {
            MenuTimeline.to(this.MenuOpenIconSVG.current, 0.5, {
                morphSVG: this.MenuCloseIconSVG.current
            }).to([this.MenuBackDiv.current, this.Menu.current], 1, {
                height: '100%',
                ease: 'power3.inOut',
                stagger: 0.1
            });

            this.setState({menuOpen: !this.state.menuOpen});
        }
    }

    render() {
        return (
            <>
                <div onClick={this.switchNavigationWindow} className={NavigationStyler.MenuIcon + " inline-flex flex-col gap-1"}>
                    <svg viewBox="0 0 32 32">
                        <path ref={this.MenuOpenIconSVG} className={NavigationStyler.MenuOpenIconSVG} d="M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z"/>
                        <path ref={this.MenuCloseIconSVG} className={NavigationStyler.MenuCloseIconSVG} d="M7.21875 5.78125l-1.4375 1.4375L14.5625 16l-8.78125 8.78125 1.4375 1.4375L16 17.4375l8.78125 8.78125 1.4375-1.4375L17.4375 16l8.78125-8.78125-1.4375-1.4375L16 14.5625z"/>
                    </svg>
                </div>
                <div ref={this.MenuBackDiv} className={NavigationStyler.MenuBackDiv}>
                </div>
                <div ref={this.Menu} className={NavigationStyler.Menu}>
                </div>
            </>
        );
    }
}

export default Navigation;

SCSS Code:

.MenuIcon {
    z-index: 1003;
    height: 40px;
    width: 40px;
    @apply absolute top-4 right-4;

    svg {
        width: 40px;
        height: 40px;
        fill: #FFFFFF;

        .MenuOpenIconSVG {
        }
        .MenuCloseIconSVG {
            visibility: hidden;
        }
    }

    &:hover {
        cursor: pointer;
    }
}

.MenuBackDiv {
    z-index: 1001;
    background-color: #202021;
    @apply absolute top-0 left-0 w-screen max-w-full;
}

.Menu {
    z-index: 1002;
    @apply bg-gray-200 absolute top-0 left-0 w-screen max-w-full;
}