Jump to content
GreenSock

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

Problems after uglify JS webpack code

Recommended Posts

Hi all

 

I animated a few SVGs. Everything works as expected. Now we wanted to go live and I uglifyed the webpack JS code with gulp-uglify. But now the transform-origin of the animations are no longer correct everywhere. 

 

I put it this way:

iconAnis.tl_icon3 = new TimelineMax({ useFrames: true, paused: true });

var tl_icon3_2 = new TimelineMax({ repeat: -1, paused: false })
            .set('#wheel_big', { transformOrigin: 'center center' })
            .from('#wheel_big', 100, { rotation: -360, ease: Power0.easeNone });

iconAnis.tl_icon3
            .add(tl_icon3_1)
            .add(tl_icon3_2, 0);

 

But after uglifying I see the inline style "transform-origin: 0px center;".

 

And if I remove the transformOrigin in JS and set it via CSS, it also does not have the intended impact on the animation:

#wheel_big{
	transform-origin: center center !important;
}

 

I use:

"gulp-uglify": "^3.0.1"

"gsap": "^2.0.2"

"webpack": "^4.20.2"
"webpack-stream": "^5.1.1"

"gulp": "^4.0.0"

"gulp-babel": "^8.0.0"

 

Any ideas how I can fix that?
 

Link to comment
Share on other sites

Hi Violetta,

 

Welcome to the forums!

 

It's quite hard to debug in the dark like this. Do you think you could setup a minimal-code example for us to look at? I have worked in projects in the past where gulp-uglify was used without having this issue. Maybe you have some setting turned on that might be mangling the code too much?

Link to comment
Share on other sites

Hi Dipscom

 

Thank you for your reply. What do you want to see?

 

Here are snippets from the gulpfile:

let webpackConfig = {
    mode: (PRODUCTION ? 'production' : 'development'),
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    compact: false
                }
            }
        }]
    },
    resolve: {
        alias: {
            TimelineMax: "gsap/src/uncompressed/TimelineMax",
            TweenMax: "gsap/src/uncompressed/TweenMax",
            TweenLite: "gsap/src/uncompressed/TweenLite",
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
    devtool: !PRODUCTION && 'source-map'
}

// Combine JavaScript into one file
// In production, the file is minified
function javascriptBoilerplate() {
    return gulp.src('../../Private/Js/Boilerplate/app.js')
        .pipe(named())
        .pipe($.sourcemaps.init())
        .pipe(webpackStream(webpackConfig, webpack2))
        .pipe($.if(PRODUCTION, $.uglify()
            .on('error', e => { console.log(e); })
        ))
        .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest(PATHS.dist + '/js'));
}

 

Or what do you need? Thank you for your help! 

Link to comment
Share on other sites

On an ideal world, if you could provide a little bundle that we can run, tinker and test to try and figure out what might be wrong.

 

Because, just reading code like that, one needs to be super experienced to know what might be wrong. Unfortunately, I am not at that level. It makes it easier being able to run the code ourselves and see it break.

 

Don't worry about sending your production setup. A single html with the minimal build tooling you have and a single line of GSAP showing the error is enough.

Link to comment
Share on other sites

Hi Dipscom

 

I know what you mean. The problem is, there is no error message :-). That's just strange. The only warning message is this during the gulp process:

 

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

 

This is my first project with webpack :-), so my experience is limited.

 

Before I invest hours and make a bundle (I do not know if that really helps, because there are a lot of dependencies), here's what it looks like right now:

https://www.violetta.ch/typo3conf/ext/va_template/Resources/Public/static_html/angebot.html

 

Almost at the end it has 6 icons with text. On hover the icons are animated. At the icon number 1, 3, 5 and 6 the transform-origin is false. It is set inline to "0px center" at all, whyever.  At the icon number 3 (Entwickeln) the transformOrigin should be "center center" for "#wheel_big" like in the code example above.
 

Maybe that helps for workaround ideas? :-)
 

Is "0px center" the default value in greensock? Or do you have an idea for a workaround? Or what else could I try?

Link to comment
Share on other sites

I've had a quick look and can't think of much from the top of my head.

 

When I ask for a bundle, if you get your project, make a copy, delete everything except that icon 3 and the rollover logic. Then, we can really just focus on the issue. Right now, it's quite hard to see what is going on if I can't change the code to see what it does.

 

There's also the fact you are using an SVG (which is not a bad thing) and SVGs have plenty of gotchas to be aware of. What happens if you try to rotate the <g> element instead of the path itself?

  • Like 1
Link to comment
Share on other sites

I have now created a reduced bundle. And the reduced bundle works as desired! HAHA

 

Thus, the reason is somewhere else .. But now I can exclude one after the other ...

 

Thank you for your patience. If I found out more and do not know further, I write here again :-).

 


 

Link to comment
Share on other sites

Typical, isn't it?

 

Anyways, that's how I usually debug when I get stuck on something. Get rid of everything, add one little bit at a time until it breaks again.

 

Do come back and let us know what was wrong, it's always useful to someone else who might be struggling with something along those lines.

 

And, well done on taking the steps. :)

 

  • Thanks 1
Link to comment
Share on other sites

A tip, you might want to remove as much of the CSS transitions that affect elements that you are animating with GSAP, use one or the other. Not CSS transitions and GSAP on the same element, it always end up causing issues because GSAP makes its calculations and store them but then, the CSS transforms mess with it all.

Link to comment
Share on other sites

I have it! I do not know why that was the "mistake", but no matter.

 

What I have done:

- removed all installed npm modules ("node_modules" folder)

- removed package-lock.json

- removed yarn.lock

 

Then I did "npm install" again. And now it works wonderfully :-).

 

Again thank you Dipscom for your help and patience!

  • Like 1
Link to comment
Share on other sites

*Magic*

 

And don't thank me, I did nothing. Thank yourself for doing it.

Link to comment
Share on other sites

  • 2 years later...

That's tough stuff, i had the same situation !

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