Uglify (uglify js) causing transformOrigin to give unexpected results.

[elegantseagulls]

I'm at a loss. I cannot replicate this issue in a CodePen so sorry in advance. Here's what I have:

 

var aiAnimations = (function () {

  function init() {

    TweenMax.set('.ai-hero__flare', { opacity: 1, transformOrigin:'50% 50%'})
    TweenMax.from('.ai-hero__flare', .7, { scale: 0, ease: Power3.easeOut })

  }

  return {
    init: init,
  };

})(jQuery);

$(document).ready(function () {
  aiAnimations.init();
});

 

The output is:

element {

    transform-origin: 0px center 0px;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);

}

 

I cannot figure out what is going wrong with transformOrigin. I'm loading GSAP v: 2.0.2 via NPM and am compiling via Gulp.

 

If I remove the line with transformOrigin nothing shows up for transform-origin inline, so it's not being overwritten elsewhere.

 

Any ideas?

 

I can set the transform-origin in my CSS, but I'd rather control it via GSAP.

 

Thanks,

Ryan

[GreenSock]

Hm, it's very difficult to troubleshoot blind and it's odd that you can't replicate the issue in codepen, but it almost sounds like when the transformOrigin is being set, the element has a zero width/height. Have you tried using a TweenMax.fromTo() instead of two calls, a set() and from()? That'd give you the most flexibility to specify exactly what you want things to start and end at. 

 

If you still need some help, it'd be super incredibly helpful to see a demo of it not working somehow

[elegantseagulls]

Ok. Sorta figured it out...or at least found a solution. Looks like my build environment got corrupted or buggy somehow. I was installing packages via `npm install` and it would fail, however if I used `yarn install` it works. Not at all sure why this is happening, but my gulp compiled JS is different after installing from npm vs yarn. ?

[elegantseagulls]

FYI. And for anyone else who may experience this: Looks like it's an issue with Uglify; I think I have it pin-pointed to this issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/355

 

NOTE: I edited the topic of this post for more clarity with the cause of the issue.

[zwob]

Can confirm, an SVG morph wasn't looking pretty anymore after updating our gulp packages.

Everthing's good again after a downgrade:

 

// package.json
// not good: "gulp-uglify": "^3.0.2",
"gulp-uglify": "^2.1.2",