aderon14

@OSUblake Thanks for that, I finally figured it out. I added it within the mounted function <script> import TweenMax from 'gsap' export default { data () { return { } }, mounted () { if (process.browser) { const Draggable = require('gsap/Draggable') Draggable.create('.scrubber__blob', { type: 'x', bounds: '.scrubber', onDrag () { let perc = this.endX / this.maxX * 100 perc = Math.floor(perc) + '%' console.log(perc) } }) } } } </script> I wonder if this is the proper way to import components and/or other libraries as they all seem to be at the top just after the opening the <script> tags

Hi, is there a way to use the gsap Draggable in Nuxt.js? I get the error "navigator is not defined" in file "node_modules\gsap\Draggable.js" line 391 _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9. I am referencing gsap and Draggable inside my .vue file by: import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' I am guessing this is due to Nuxt doing a server side render and not having a window/navigator object?

thank you very much!

Lets say the elements are squares instead of dots. Would it be possible to have them rotate according to the bezier curve?