Hirbod

I like https://www.remymartin.com/vsop-limited-edition/ the most. But they are all the same, just other themes.

Dear GSAP Team, As promised, I finally get to present my work to you. Without GSAP this would never have been possible. THIS IS NO AD. I just wanted to show what I've done with your incredible tools. https://www.remymartin.com/vsop-limited-edition/ https://www.remymartin.com/xo-red-limited-edition/ https://www.remymartin.com/xo-gold-limited-edition/ https://www.remymartin.com/1738-limited-edition/ There is also a digital greeting card generator. https://www.remymartin.com/eoy-wizard And this card I created for you, the GSAP team. https://www.remymartin.com/cheers/b61639 In the end I had to work on it for many weeks, not everything is perfect yet, but the customer and I are very satisfied. Thanks again for the incredible tools you gave me.

@GreenSock yes, your suggested workaround does fix the issue. Thanks.

Yes, I am calling install after registration @GreenSock which one of the suggestions are the preferred ones now?

Yes, the window thing fixed the issue @OSUblake. I am using version 3.6.1 And you're right, webpack is mangling the function name to function w(E,X){Yt||Nt(),this.elements=q(E),this.chars=[],this.words=[],this.lines=[],this._originals=[],this.vars=X||{},I&&this.split(X)} which is most likely the reason is was undefined. Maybe worth a note inside of the docs? Thank you VERY MUCH!.

@OSUblake it's working window.SplitText = SplitText; fixed the issue for me. Super strange. While it does fix it for me, it still feels like a workaround and I am pretty sure that there is something wrong with SplitText, as I haven't had a single issue with the other plugins.

I am 100% sure. As said, while developing, trying to access SplitText via Developer Console is working great. It's there. On my production build, it's gone. I don't know if webpack lazy-require / webpackchunk is messing around here, but since every other plugin is available, I am curious what might be the issue @OSUblake Have a look at my Screenshots please.

Quick note on my part: I've disabled tree-shaking (just to verify) and it didn't change a thing. Still not defined and also not registered.

Hi, I have a specific reason to add gsap into window using gsap.install(window). import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { SplitText } from 'gsap/SplitText'; import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; import { ScrollToPlugin } from 'gsap/ScrollToPlugin'; import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin'; gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, ScrollToPlugin, ScrambleTextPlugin, SplitText); Inside of my constructor I call gsap.install(window); This was and is working flawlessly and I can work with GSAP across of multiple modules and elements spread all over my app. Today I've added SplitText as I need some specific text animations. But SplitText is ONLY working while I am developing. As soon as I generate a production build (webpack), SplitText get's undefined and is also not available inside of window anymore, while it is while I am developing. This only happens with SplitText, every other plugin works just fine. I guess there is something different how SplitText registers or exports? Uncaught ReferenceError: SplitText is not defined Thanks!

Hi @GreenSock thank you very much for your kind words and your help. Sorry I didn't create a codepen, I thought my explanation was enough to evoke an example from the archive if necessary. Next time I will prepare a codepen. After a lot of back and forth and very intensive testing, I finally figured out how the whole thing works and I also fully understood the timeline. The position parameter ".to(element, { options }, position)" was strange to me but exactly this was the key to my problem. I also finally understood how to arrange the elements and how to use the values relative or absolute). It's a bit complicated to figure out when working with "scrub: true", because the seconds are then percentage values in relation to the total length of the pinning end. It is written in the documentation, but as a beginner it is sometimes a bit more difficult to understand. But it works wonderfully and my scrollytelling page is almost done and looks fabulous. I can't wait to show off the project once it's live in a few weeks. Thanks for the best JS library in the world.

Yes, I have removed that line because it has messed up all my other packages (after install). But I had that line added globally before and ended up creating a local one after the setup and everything seems to work fine now (since the GreenSock Registry is cached somehow). I will have to check if I still receive updates though.

@Jamesh be careful. This will set the NPM Registry completely to the one that GreenSock provided. I also encountered this and all my packages suddenly had been couple of months old. (Webpack 5.3.x dropped to 5.1 or something) because the provided registry does not update as fast as the main. I ended up removing that line I've suggested after the installation and everything worked out fine so far.

Hello everyone, first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. I have a conceptual question and I have tried many ways to get it to work correctly but I realize I am barking up the wrong tree. I have a section that has 100vh height and is pinned. It starts "top top" and ends "+=400%". Inside this section I have 4 text layers. These are also 100vh height and 100vw width and absolutely top/left set to 0. All text layers have an opacity of 0. Everything starts with a blank red section and some firework animation. When reaching 50% (out of 400%) I want to have text layer 1 from opacity 0 reaching opacity 1. Starting from 50% to 100%, I want to begin hiding layer 1 and fade in layer 2. When 100% is reached, I want text layer 1 to be opacity 0 and text layer 2 to be opacity 1. I want the same to continue in increments of 50. So when 150% (out of 400%) is reached, text layer 2 should change from opacity 1 to 0 and likewise at the same time text layer 3 should change from opacity 0 to 1. Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course. The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed. Thanks! Regards Hirbod

Hi and welcome, I just purchased and had the same issue and the fix was VERY easy for me: registry=https://npm.greensock.com This little piece of information is missing in the setup instructions and I just found it here at the forums. As you can see in my attachment, the content only contains the "comment" and the @gsap:registry line but I also had to write down the first line as written at the beginning. After that, my issue E403 was gone and it installed perfectly. Maybe its worth adding this line to the setup instructions. Wasn't a smooth start so far (while everything else is very smooth, been using ScrollTrigger for a while now and I love it) P.S: Copy to clipboard button is not working (MacOS, Chrome 89, Big Sur 11.2.3)