Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minification of ScrollTrigger changes plugin name #385

Closed
dexster opened this issue Jun 4, 2020 · 5 comments
Closed

Minification of ScrollTrigger changes plugin name #385

dexster opened this issue Jun 4, 2020 · 5 comments

Comments

@dexster
Copy link

dexster commented Jun 4, 2020

I'm getting an issue with a prod Angular build due to optimisation which change the class name from "ScrollTrigger" to "e". I'm not sure this is limited to Angular as most ugllify/minify packages shorten names.

In scrollTrigger.js plugin this is passed to the registerPlugin and by this stage the name has already been shortened to "e":
_getGSAP() && gsap.registerPlugin(ScrollTrigger);

This gets added to the globals as e which causes the check - _globals.ScrollTrigger - to fail
in the _scrollTrigger function

Screenshot 2020-06-04 at 12 17 58

I know there are options to keep names unchanged during minification but it would be great to try find a solution at the source.

We should probably not rely on the class name but create another property, something like "pluginName" which would then be added to the global object?

@dexster
Copy link
Author

dexster commented Jun 4, 2020

I was wondering why this wasn't happening with other plugins. I see they are created like this:

export const CSSPlugin = {
	name: "css",

@jackdoyle
Copy link
Member

Hm, I can't seem to reproduce that issue, but we did fix a different issue which may be related - ScrollTrigger no longer relies on the "name" being implicitly defined. I suspect in 3.3.1 (due out soon), this won't be an issue anymore. Would you like to preview it?

@dexster
Copy link
Author

dexster commented Jun 4, 2020

Yup. Let's see if it solves this

@jackdoyle
Copy link
Member

You can npm install this file: https://assets.codepen.io/16327/gsap-beta.tgz

Better?

@dexster
Copy link
Author

dexster commented Jun 5, 2020

That fixed it. Thanks

@dexster dexster closed this as completed Jun 5, 2020
jackdoyle added a commit that referenced this issue Jun 5, 2020
- NEW: ScrollTrigger.batch() method that eliminates the need for something like IntersectionObserver in cases where you want to stagger the animations of elements as they enter the viewport.

- NEW: ScrollTrigger now recognizes an onRefreshInit callback which can be useful in advanced situations where you want to reset positioning of elements just for the calculation of the start/end. If you return a gsap.set() call (or any GSAP animation, but it really only makes sense to do a gsap.set()), it'll actaully revert it automatically when the refresh finishes!

- NEW: Any "refreshInit" listener can [optionally] return a gsap.set() call that'll get reverted as soon as the refresh finishes. Super useful for resetting positions just for the refresh() measurements.

- IMPROVED: ScrollTrigger is now compatible with Internet Explorer and it no longer relies on the "name" being implicity defined. This also fixes some problems that occured in bundlers. See #385 (comment)

- FIXED: if you refresh a page after scrolling down, ScrollTrigger may call the onEnter for everything ABOVE that position (including triggers that are off-screen). Now it only fires the onEnter for triggers that are truly inbetween their start and end positions.

- FIXED: here were a few TypeScript definition file problems. See #383 and #338

- FIXED: Various problems with ScrollTrigger not updating or refreshing properly in certain edge cases.

- FIXED: in some rare cases, an error could be thrown by Draggable or MotionPathPlugin if you tried animating/dragging an element with an ancestor element that has been interacted with by GSAP but NOT related to transforms. See https://greensock.com/forums/topic/24318-nuxtjs-draggable-error-cacherendertransform-is-not-a-function/

- FIXED: if a nested tween gets overwritten INSIDE a stagger tween, it now adjusts the duration of that parent tween when appropriate. For example, if the last staggered tween gets killed, it should shorten the duration of the parent tween.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants