Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
elegantseagulls

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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",

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×