atomboy

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?

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!

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.

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

I made a rough estimation in KiloBytes not gzipped. TweenMax 110KB. TweenLite 27KB. CSSPlugin 41KB. Minified state as shipped no gzip.

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!

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.

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?

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.