Fivetwelve

Hey, @danboyle8637, thanks for the follow-up. I eventually saw your approach in the Gatsby debugging section. I, too, am using Netlify so I'm very pleased to hear it's working great for you. I will try that as well. I do hope that we'll be able to get a point where this exception is not necessary. I think GSAP and React are both amazing frameworks. There's much better integration than when I first tried using them together a few years ago.

Hi, Jack— I'm not an expert on server-side rendering but the crux is anytime a module is looking for document or window property, it will fail because those browser properties aren't available. A Gatsby doc discusses workarounds from the dev perspective but not actual solutions for the module creator: https://www.gatsbyjs.org/docs/debugging-html-builds/. Honestly, the best way may be to reach to some other folks who may have dealt with this. Here's an example. On my project, I've had to add an image/slide carousel (I know, don't get me started...). I know there are a fair amount of libraries that work within a React framework but not on Gatsby for exactly the same issue (Flickity is a good case). However I came across Nuka, a React-opinionated carousel. I haven't had a chance to dig into why/how but that team managed to avoid the issue and it builds nicely in both local and server environments. Perhaps these folks might be open to answering your question. I wish I could be more help. If you're referring to the version in `bonus-files-for-npm-users` I find that both that and the one in `umd` subdirectory generated the same error.

I encountered the same error with the DrawSVGPlugin since I also had to import the file locally. I see the same error whether I used the typical or UMD version of the plugin. I, too, am using Gatsby. As mentioned earlier Gatsby's build script generates an isomorphic version hence the errors while it works fine for local dev builds. I'm not sure how @danboyle8637 managed to suppress the warning but I didn't feel comfortable attempting that in the event it fails in my build pipeline. I opted to move the import into gatsby-browser.js and it worked that way. Any imports there get loaded regardless whether the page needs it or not so not ideal but at least it is an error-free resolution. It would be great if in the future the _doc check for the plugins could be made to be SSG-friendly. HTH anyone else coming here with the same issue.

I eventually managed to work around this. Although the elements tweened properly the first time, the second time around required that the direct parent's visibilty be adjusted. My elements tweened in TimelineLite were the children of a container but not the direct descendants. i.e. I had #section0 > .someContainer > h2 I added TweenMax.to($('#section0 .someContainer'), 0, {autoAlpha: 0, overwrite:'all'}); to the beginning of my toggle back to the first tab and it worked. It seems that when the child elements completed their tween the parent's visibility:hidden kicked in. And during the tween, the child properties must have temporarily overridden the parent's, giving me that result of fading to visible then disappearing.

Hi, there— I'm hoping someone can help suss out what I'm doing wrong. I have a page that has 2 blocks of content with a couple of <li> elements to toggle between the two, like tabs. I'm using TimelineLite to show the first block, and—when toggling to the other block—TweenMax to hide the first block's elements and TimelineLite to transition in the second block's. What happens is page loads, first block appears. Toggle to 2nd block. 1st block is hidden, 2nd block appears. When I toggle back, 2nd block is hidden, 1st block appears BUT proceeds to disappear; it doesn't stay visible. The parent, #section0 is set visibility: hidden in the css and I'm using TimelineLite and TweenMax to do the hiding/revealing of the children only. For simplicity sake, I'll show only TimelineLite's first element being tweened. var tl0 = new TimelineLite(); tl0.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //then my click handler: $('#subNav').on('click', 'li:not(.selected)', function() { $('#subNav li').removeClass('selected'); $(this).addClass('selected'); var idx = $('#subNav li.selected').index(); switch(idx) { case 0: //hide block 2, then show block 1 TweenMax.to($('#section1 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlA = new TimelineLite(); tlA.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //Block 1 then disappears. break; case 1: //hide block 1, then show block 2 TweenMax.to($('#section0 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlB = new TimelineLite(); tlB.to($('#section1 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); break; default: break; } }); Thank you in advance! —Victor