Jump to content
Search Community

Webpack 4 - production Mode, Timeline Max

Fritz1602 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, this is my very first Question and I am a noob according GSAP, Webpack and this forum.

 

I hope that this is the right way and place to ask a question and I provide all necessary information. 

 

What I am trying to achive is learning to work with wonderful GSAP (TweenMax and TimelineMax) and Webpack4. Everything is working fantastic with 

"-- mode development".

 

I imported GSAP this way in my nav.js file.

 

import TweenMax from "gsap/TweenMax";

 

When I switch to -- mode production in my build process, the animation runs, but instead of an "X" it ended like shown in the uploaded image.

 

 

Any hint in which direction I could go further would be most welcome.

 

Sorry for my English and many thanks in advance. 

 

 

 

navi.jpg

See the Pen xzZJZQ by jesperwestlund (@jesperwestlund) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

This normally happens because of tree shaking in production mode. To prevent that you can add this to your file:

 

import { TimelineMax, CSSPlugin }  from "gsap/all";

const plugins = [ CSSPlugin ];

 

Take a look at the docs here (scroll a little bit and you'll find the relevant part):

 

https://greensock.com/docs/NPMUsage

 

Happy Tweening!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Many thanks for the friendly welcome and the directional advice.
Unfortunately, no improvement has yet occurred.
If I understand correctly, I have to separately import and address all plugins 
that have led to successful animation in dev mode. 
Is there an easier way to find this out? So far I have - unfortunately without success - tried the following
import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all";
const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ];

 

 

Link to comment
Share on other sites

Mhhh... I'm terribly sorry I misunderstood the issue you're having. I rushed away to think this was a tree shaking issue where the animation wasn't happening at all and now I see is about the animation running differently in development and production. Apologies all around :oops:

 

Have you tried using just rotation instead of rotationZ, the effect is the same. Also GSAP interprets numbers as pixels by default, I see some strings in your config objects, perhaps try passing just numbers:

 

this.menuToggle
  .set(this.controlit, {className:"-=closemenu"})
  .set(this.controlit, {className:"+=openmenu"})
  .to(' .top', .2, {y:-9, transformOrigin: '50% 50%'}, 'burg')
  .to(' .bot', .2, {y:9, transformOrigin: '50% 50%'}, 'burg')
  .to(' .mid', .2, {scale:0.1, transformOrigin: '50% 50%'}, 'burg')
  .add('rotate')
  .to(' .top', .2, {y:5}, 'rotate')
  .to(' .bot', .2, {y:-5}, 'rotate')
  .to(' .top', .2, {rotation:45, transformOrigin: '50% 50%'}, 'rotate')
  .to(' .bot', .2, {rotation:-45, transformOrigin: '50% 50%'}, 'rotate');

 

That does exactly the same animation, give it a try and let us know.

 

Finally, just in case tree shaking is causing this, that is the actual import statement and the GSAP tools you're using in your file?

 

Happy Tweening!!

  • Thanks 1
Link to comment
Share on other sites

Thank you so much. I changed my Code to this. I hope I have followed your advice in this way.

 

 

 

  var controlit = document.querySelector("#hamburger-btn");
  var menuToggle = new TimelineMax({
    paused: true,
    reversed: true
  });
menuToggle
  .set(controlit, {className:"-=closemenu"})
  .set(controlit, {className:"+=openmenu"})
  .to(' .top', .2, {y:-9, transformOrigin: '50% 50%'}, 'burg')
  .to(' .bot', .2, {y:9, transformOrigin: '50% 50%'}, 'burg')
  .to(' .mid', .2, {scale:0.1, transformOrigin: '50% 50%'}, 'burg')
  .add('rotate')
  .to(' .top', .2, {y:5}, 'rotate')
  .to(' .bot', .2, {y:-5}, 'rotate')
  .to(' .top', .2, {rotation:45, transformOrigin: '50% 50%'}, 'rotate')
  .to(' .bot', .2, {rotation:-45, transformOrigin: '50% 50%'}, 'rotate');
  controlit.addEventListener('click', (e) => {
    menuToggle.reversed() ? menuToggle.restart() : menuToggle.reverse();
  });

 

Unfortunately, nothing has changed. Dev mode is great. Production mode remains strange. 

30 minutes ago, Rodrigo said:

Finally, just in case tree shaking is causing this, that is the actual import statement and the GSAP tools you're using in your file?

I don't know, if I got the question right.

In dev Mode all my code is running fine just importing like this. 

 

import TweenMax from "gsap/TweenMax";

 

After your kind hint with tree shaking I tested the following without success for production mode.

import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all";
const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ];

 

 

Beside the tiny hamburger Animation above,  I am doing some staggered Animations for menu items, which works perfectly fine in dev and production mode. 

 

TweenMax.staggerTo(primaryMenuLiItems, 1, {
      ease: Back.easeOut,
      autoAlpha: 0,
      x: 50
    },
    .1
  );

 

It seems to be an issue with the transform-origin for "path.top" and "path.bot". In dev Mode  the following element style results in a perfect "X"

    transform-origin: 0px 0px 0px;

 

In production mode the following element  causes the strange result

    transform-origin: 0px center;

 

I am heartbroken to make so much effort and apologize again for my English. Thanks a million. 

 

 

 

Link to comment
Share on other sites

I cannot imagine why it would behave differently in production mode other than the tree shaking issue @Rodrigo already mentioned. And you don't need to load or reference TweenPlugin anywhere. 

 

If you're still having trouble, would you please create a reduced test case with only the absolutely essential code and post it here? It can literally be one tween involving transformOrigin if you'd like, and it doesn't need to use any of your "real" assets - we just need to be able to reproduce the issue so that we can help. Again, I can't fathom how things would behave differently in production if everything is loading properly. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hm. Thanks a bunch. 

It's deep in the night here and I followed your advice and tried to isolate the problem in a smaller Webpack setup.

 

Can't reproduce the error. In my reduced test-case everything runs as expected. GSAP is wonderful. I will dive in deeper in the next days and weeks. If I will find out the reasons, I will let you know.

 

Once More. Thank you for wonderful GSAP and great support and your efforts. 

  • 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.
×
×
  • Create New...