MorphSVG plugin

[atomboy]

I have a button which morphs an svg on click. However when clicking rapidly the svg path is malformed. How to avoid this?

 

Edit: Seems to go away when I remove transform-origin so the problem lies within transform origin

 

this.tl.to(this.envTop, 0.5, { morphSVG: this.envTopPath, rotation: 0, transformOrigin: '50% 50%' }, 0)
                .to(this.envBottom, 0.5, { morphSVG: this.envBottomPath, rotation: 0, transformOrigin: '50% 50%' }, '-=0.5')


this.tl.to(this.envTop, 0.5, { morphSVG: this.envTopPath, rotation: 0 }, 0)
                .to(this.envBottom, 0.5, { morphSVG: this.envBottomPath, rotation: 0 }, '-=0.5')

[GreenSock]

Hm, would you be able to post a very simple codepen or jsfiddle that demonstrates the issue? I'm struggling to understand why transformOrigin would matter here (morphing doesn't really concern itself with transforms). 

[atomboy]

I'ts the rotation this is the code I use each click the timeline reinstantiate. If essential I could make a pen to reproduce

 

        const tl = new TimelineLite()
        tl.set(this.envTop, { transformOrigin: '50% 50%' })
            .set(this.envBottom, { transformOrigin: '50% 50%' })
        if (!checkedTwo && two) {
            tl.to(this.envTop, 0.5, { morphSVG: this.crossTopPath, rotation: 360 }, 0)
                .to(this.envBottom, 0.5, { morphSVG: this.crossBottomPath, rotation: 360 }, '-=0.5')
                .to(this.envLeft, 0.5, { x: -300 }, '-=0.5')
                .to(this.envRight, 0.5, { x: 300 }, '-=0.5')
        } else if (checkedTwo) {
            tl.to(this.envTop, 0.5, { morphSVG: this.envTopPath, rotation: 0 }, 0)
                .to(this.envBottom, 0.5, { morphSVG: this.envBottomPath, rotation: 0 }, '-=0.5')
                .to(this.envLeft, 0.5, { x: 0 }, '-=0.5')
                .to(this.envRight, 0.5, { x: 0 }, '-=0.5')
        }

 

 

I also did a play reverse without reinstatiating the timeline but that also gave wrong positioning after clicking fastly on the button.

[GreenSock]

Yeah, it doesn't really help to just see a little chunk of the code - we really need to see it in context to understand the problem. A codepen would be super helpful. 

[PointC]

Hi atomboy 

 

When something is looking odd or getting out of position with rapid clicks that tells me tweens are getting overwritten. For click morphs I always create a timeline and play/reverse it on click rather than creating new tweens or timelines on each click.

 

As Jack mentioned, a CodePen demo is always better so we can edit your code and give you the best help. Please let us know when you have that ready.

 

Thanks.

[atomboy]

I'm using React. The way I setup the timeline to make things work well is to instantiate the timeline in the constructor() { ... } and to add the animation in componentDidMount() { ... } -- Then play reverse it in the click handler. 

Thanks for the support, great as always!