MRParag

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...

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

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