Smithy

So I'm curious if there is any good tutorials out there on how to use React Hooks with GSAP What I'm looking to do is most likely use some useEffect hooks to have an animated transition in and then a transition out. If there are no existing resources on this for me to read up on then I'll look to post my code in here once I'm to that point.

So I'm looking to use some of the bonus plugins that came with Business Green in a site I'm publishing on Heroku or Netlify. I can use the plugins locally and have excluded the bonus plugins tarball (using my .gitignore file) from my public repo. How does one use the bonus plugins when publishing to Heroku or Netlify from a public repo? (or should I just make the repo private and then upload the bonus plugins tarball with it?) Cheers, Smithy

That was exactly the issue! Zach also sent me over a super helpful video that showed me the right way to get it to work. Thanks!

Howdy Greensockians! I'm a new Business Green dev and I'm trying to use GSDevTools in my React project. I've tried adding GSDevTools in a few different ways, but I keep getting the following error (its big one): TypeError: Cannot read property 'createElementNS' of undefined _createElement src/addons/GSDevTools.js:40 37 | }()), 38 | _parseAnimation = animationOrId => (animationOrId instanceof Animation) ? animationOrId : animationOrId ? gsap.getById(animationOrId) : null, 39 | _createElement = (type, container, cssText) => { > 40 | let element = _doc.createElementNS ? _doc.createElementNS(type === "svg" ? _svgNS : _domNS, type) : _doc.createElement(type); | ^ 41 | if (container) { 42 | if (_isString(container)) { 43 | container = _doc.querySelector(container); View compiled _createRootElement src/addons/GSDevTools.js:138 135 | _addedCSS, 136 | _createRootElement = (element, minimal, css) => { 137 | if (!_addedCSS) { > 138 | _createElement("style", _docEl).innerHTML = '.gs-dev-tools{height:51px;bottom:0;left:0;right:0;display:block;position:fixed;overflow:visible;padding:0}.gs-dev-tools *{box-sizing:content-box;visibility:visible}.gs-dev-tools .gs-top{position:relative;z-index:499}.gs-dev-tools .gs-bottom{display:flex;align-items:center;justify-content:space-between;background-color:rgba(0,0,0,.6);height:42px;border-top:1px solid #999;position:relative}.gs-dev-tools .timeline{position:relative;height:8px;margin-left:15px;margin-right:15px;overflow:visible}.gs-dev-tools .progress-bar,.gs-dev-tools .timeline-track{height:8px;width:100%;position:absolute;top:0;left:0}.gs-dev-tools .timeline-track{background-color:#999;opacity:.6}.gs-dev-tools .progress-bar{background-color:#91e600;height:8px;top:0;width:0;pointer-events:none}.gs-dev-tools .seek-bar{width:100%;position:absolute;height:24px;top:-12px;left:0;background-color:transparent}.gs-dev-tools .in-point,.gs-dev-tools .out-point{width:15px;height:26px;position:absolute;top:-18px}.gs-dev-tools .in-point-shape{fill:#6d9900;stroke:rgba(0,0,0,.5);stroke-width:1}.gs-dev-tools .out-point-shape{fill:#994242;stroke:rgba(0,0,0,.5);stroke-width:1}.gs-dev-tools .in-point{transform:translateX(-100%)}.gs-dev-tools .out-point{left:100%}.gs-dev-tools .grab{stroke:rgba(255,255,255,.3);stroke-width:1}.gs-dev-tools .playhead{position:absolute;top:-5px;transform:translate(-50%,0);left:0;border-radius:50%;width:16px;height:16px;border:1px solid #6d9900;background-color:#91e600}.gs-dev-tools .gs-btn-white{fill:#fff}.gs-dev-tools .pause{opacity:0}.gs-dev-tools .select-animation{vertical-align:middle;position:relative;padding:6px 10px}.gs-dev-tools .select-animation-container{flex-grow:4;width:40%}.gs-dev-tools .select-arrow{display:inline-block;width:12px;height:7px;margin:0 7px;transform:translate(0,-2px)}.gs-dev-tools .select-arrow-shape{stroke:rgba(255,255,255,.6);stroke-width:2px;fill:none}.gs-dev-tools .rewind{height:16px;width:19px;padding:10px 4px;min-width:24px}.gs-dev-tools .rewind-path{opacity:.6}.gs-dev-tools .play-pause{width:24px;height:24px;padding:6px 10px;min-width:24px}.gs-dev-tools .ease{width:30px;height:30px;padding:10px;min-width:30px;display:none}.gs-dev-tools .ease-path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2px}.gs-dev-tools .ease-border{fill:rgba(255,255,255,.25)}.gs-dev-tools .time-scale{font-family:monospace;font-size:18px;text-align:center;color:rgba(255,255,255,.6);padding:4px 4px 4px 0;min-width:30px;margin-left:7px}.gs-dev-tools .loop{width:20px;padding:5px;min-width:20px}.gs-dev-tools .loop-path{fill:rgba(255,255,255,.6)}.gs-dev-tools label span{color:#fff;font-family:monospace;text-decoration:none;font-size:16px;line-height:18px}.gs-dev-tools .time-scale span{color:rgba(255,255,255,.6)}.gs-dev-tools button:focus,.gs-dev-tools select:focus{outline:0}.gs-dev-tools label{position:relative;cursor:pointer}.gs-dev-tools label.locked{text-decoration:none;cursor:auto}.gs-dev-tools label input,.gs-dev-tools label select{position:absolute;left:0;top:0;z-index:1;font:inherit;font-size:inherit;line-height:inherit;height:100%;width:100%;color:#000!important;opacity:0;background:0 0;border:none;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.gs-dev-tools label input+.display{position:relative;z-index:2}.gs-dev-tools .gs-bottom-right{vertical-align:middle;display:flex;align-items:center;flex-grow:4;width:40%;justify-content:flex-end}.gs-dev-tools .time-container{font-size:18px;font-family:monospace;color:rgba(255,255,255,.6);margin:0 5px}.gs-dev-tools .logo{width:32px;height:32px;position:relative;top:2px;margin:0 12px}.gs-dev-tools .gs-hit-area{background-color:transparent;width:100%;height:100%;top:0;position:absolute}.gs-dev-tools.minimal{height:auto;display:flex;align-items:stretch}.gs-dev-tools.minimal .gs-top{order:2;flex-grow:4;background-color:rgba(0,0,0,1)}.gs-dev-tools.minimal .gs-bottom{background-color:rgba(0,0,0,1);border-top:none}.gs-dev-tools.minimal .timeline{top:50%;transform:translate(0,-50%)}.gs-dev-tools.minimal .in-point,.gs-dev-tools.minimal .out-point{display:none}.gs-dev-tools.minimal .select-animation-container{display:none}.gs-dev-tools.minimal .rewind{display:none}.gs-dev-tools.minimal .play-pause{width:20px;height:20px;padding:4px 6px;margin-left:14px}.gs-dev-tools.minimal .time-scale{min-width:26px}.gs-dev-tools.minimal .loop{width:18px;min-width:18px;display:none}.gs-dev-tools.minimal .gs-bottom-right{display:none}@media only screen and (max-width:600px){.gs-dev-tools{height:auto;display:flex;align-items:stretch}.gs-dev-tools .gs-top{order:2;flex-grow:4;background-color:rgba(0,0,0,1);height:42px}.gs-dev-tools .gs-bottom{background-color:rgba(0,0,0,1);border-top:none}.gs-dev-tools .timeline{top:50%;transform:translate(0,-50%)}.gs-dev-tools .in-point,.gs-dev-tools .out-point{display:none}.gs-dev-tools .select-animation-container{display:none}.gs-dev-tools .rewind{display:none}.gs-dev-tools .play-pause{width:20px;height:20px;padding:4px 6px;margin-left:14px}.gs-dev-tools .time-scale{min-width:26px}.gs-dev-tools .loop{width:18px;min-width:18px;display:none}.gs-dev-tools .gs-bottom-right{display:none}}'; | ^ 139 | _addedCSS = true; 140 | } 141 | if (_isString(element)) { View compiled new GSDevTools src/addons/GSDevTools.js:387 384 | } 385 | 386 | //GENERAL/UTILITY > 387 | let _self = this, | ^ 388 | root = _createRootElement(vars.container, vars.minimal, vars.css), 389 | find = s => root.querySelector(s), 390 | record = (key, value) => { View compiled Function.push../src/addons/GSDevTools.js.GSDevTools.create src/addons/GSDevTools.js:1185 1182 | } 1183 | }; 1184 | > 1185 | GSDevTools.create = vars => new GSDevTools(vars); 1186 | 1187 | GSDevTools.register = _initCore; 1188 | View compiled Module../src/index.js src/index.js:9 6 | import {GSDevTools} from './addons/GSDevTools' 7 | 8 | ReactDOM.render(<App />, document.getElementById('root')); > 9 | GSDevTools.create() 10 | // If you want your app to work offline and load faster, you can change 11 | // unregister() to register() below. Note this comes with some pitfalls. 12 | // Learn more about service workers: https://bit.ly/CRA-PWA View compiled __webpack_require__ /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:4847:18 __webpack_require__ /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled checkDeferredModules /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); > 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready > 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:71 Any thoughts / how-to pages on using GSDevTools (and the other member plugins) with React? Thanks! The Smithy