[Scaling from center not working]

I'm trying to scale down an SVG rectangle. The CSS:

transform: scaleX(0); -> transform: scaleX(1);
transform-origin: 'center'; 

Does exactly what I wan't to achieve (scaling width from center position). However when I use the settings in TweenMax e.g.:

 

.fromTo('#center', 0.7, { transform: 'scaleX(0)', transformOrigin: 'center' }, { transform: 'scaleX(1)' })

 

It transform from the left with matrix.

 

How can I force to use the transform: scaleX(#) animation?

[MorphSVG plugin]

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!

[MorphSVG plugin]

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.

[MorphSVG plugin]

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')

[Webpack your Greensocks]

I made a rough estimation in KiloBytes not gzipped.

TweenMax 110KB. TweenLite 27KB.  CSSPlugin 41KB.  Minified state as shipped no gzip.

[Webpack your Greensocks]

I make modules which are used in multiple projects/websites (or not).

// Module A -- example size of 50KB -- Requires TweenLite and CSSPlugin
import TweenLite from 'gsap/TweenLite'
import 'gsap/CSSPlugin'


// Module B -- example size of 100KB -- Requires TweenMax
import TweenMax from 'gsap'


// Module C -- example size of 100KB -- Requires TweenLite and CSSPlugin
import { TweenLite, CSSPlugin } from 'gsap'

A website that only includes module A is happy because it's only 50KB.

 

A website that only includes module B is happy because it's only 100KB.

 

A website that only includes module C is unhappy because it could be 50KB instead of 100KB.

 

A website that includes both module A and B is unhappy because together they could be 100KB instead of 150KB.

 

 

In an ideal situation 

• Module A is imported like Module C and is for example only 50KB instead of 100KB.
• Greensock modules are deduped when TweenMax is bundled and one of it's included submodules is imported elsewhere.
• A module with depedencies (correct me if i'm wrong) like jquery.gsap.js, should automatically check for missing dependencies and import them.

An 2.0 situation

The 'lodash-webpack-plugin' looks for used functions/submodules in your code and only includes those automatically. This can be made in the form of a Webpack specific plugin but as I'm a big fan of Webpack; totally awesome!

[Webpack your Greensocks]

....

import {TweenLite, CSSPlugin} from "gsap";

 

 

This includes the TweenMax file as a whole and adds 50kb of file size. Now this is not the end of the world but not very elegant.

[Webpack your Greensocks]

As Webpack is taking over the package manager scene by storm I wonder if there is already a module/submodule managing script developed for GSAP. I know we can hand code this ourself but as a paying user this feels kinda off.

 

Using the premium GSAP package, and for instance module 1 uses TweenLite and CSSPlugin as include/import and module 2 uses TweenMax. They are all included instead of only TweenMax.

 

Is this functionality being delivered or has it already been?

[Tweening 'x' laggy in Firefox and Safari]

Hi,

 

For a yet to be released project i am animating an really big SVG image which has PNG layers and some SVG elements. The entire SVG has a shocking size of 1.8Mb. I am animating the x position of 3 groups containing SVG and PNG elements with:

TweenLite.to("#group1", 1, {x:50})

// results in this element style when stopped animating:
"transform: matrix(1, 0, 0, 1, 0, 70);" data-svg-origin="307.8999938964844 6.610000133514404"

The animations looks smooth enough on very slow Windows machines with Chrome, IE & Edge but on Safari and Firefox it is stuttering and lagging to a point where the website looks to be loading in 1 frame per second.

 

What would be an good alternative or workaround to get it to work smooth across all browsers.