elrojo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by elrojo
-
-
I have a working example using ES6 and all is working fine. However, when I move over to typescript I am now seeing the error.
Error:
(alias) class TweenMax
import TweenMaxExpected 2-3 arguments, but got 6.ts(2554)Es6 working example:
https://codesandbox.io/s/svg-poc-forked-op0rx
TScode:
import { TweenMax, Expo } from "gsap"; let logo = document.querySelector(".logo"); let lineTop = document.querySelector(".line-top"); let lineCenter = document.querySelector(".line-center"); let lineBottom = document.querySelector(".line-bottom"); const myArr: any[][] = [ [lineBottom, "-22px", "0", 45, -22], [lineTop, "22px", "0", -45, 23] ]; TweenMax.set([logo], { opacity: 0 }); export function animate() { const tl = new TimelineMax(); tl.add(TweenMax.to(logo, 1, { opacity: 1 })); myArr.map((_item, index) => { return tl.add( TweenMax.to( myArr[index][0], 0.25, { y: myArr[index][1], transformOrigin: "50% 50%", ease: Expo.easeInOut, delay: myArr[index][2] }, TweenMax.to(lineCenter, 0, { opacity: 0, delay: 1.5 }), TweenMax.to(myArr[index][0], 0.35, {rotation: myArr[index][3], y: myArr[index][4], ease: Expo.easeInOut, delay: 1.75 }), TweenMax.to(myArr[index][0], 0.25, {scale: 1.5,delay: 2.5}) ) ); }); }
-
Hey Jack,
Thanks for getting back to me. If I comment out "Draggable and Throwprops" I can get the build to run.
My stack includes Gatsby and Netlify Cms also.
I had all this working until I ran updates. I changed all the imports.
import TweenLite from "gsap/umd/TweenLite";import TweenMax from "gsap/umd/TweenMax";import Modifiers from "gsap/umd/ModifiersPlugin";import Draggable from "gsap/umd/Draggable";import ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";Receiving the error below:
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND 389 | return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM))); 390 | }, > 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. | ^ 392 | _tempTransforms = [], 393 | _tempElements = [], 394 | _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container. WebpackError: navigator is not defined - Draggable.js:391 Function.<anonymous> ~/gsap/umd/Draggable.js:391:51 - TweenLite.js:107 Definition.check ~/gsap/umd/TweenLite.js:107:1 - TweenLite.js:130 new Definition ~/gsap/umd/TweenLite.js:130:1 - TweenLite.js:135 window._gsDefine ~/gsap/umd/TweenLite.js:135:1 - Draggable.js:19 ~/gsap/umd/Draggable.js:19:1 - Draggable.js:2477 Object._gsScope ~/gsap/umd/Draggable.js:2477:30 - Slider.js:4 Object._exports src/components/Slider.js:4:1 - index.js:5 Object.exports.__esModule src/pages/index.js:5:1
Package.json:
...
"dependencies": {"@babel/runtime": "^7.0.0-beta.56","babel-runtime": "^6.26.0","bulma": "^0.7.1","classnames": "^2.2.6","gatsby": "^1.9.277","gatsby-cli": "^1.1.58","gatsby-link": "^1.6.46","gatsby-plugin-netlify": "^1.0.21","gatsby-plugin-netlify-cms": "^3.0.0-beta.1","gatsby-plugin-react-helmet": "^2.0.11","gatsby-plugin-sass": "^1.0.26","gatsby-plugin-sharp": "^1.6.48","gatsby-remark-images": "^1.5.67","gatsby-source-filesystem": "^1.5.39","gatsby-transformer-remark": "^1.7.44","gatsby-transformer-sharp": "^1.6.27","gsap": "^2.0.1","history": "^4.7.2","lodash": "^4.17.10","lodash-webpack-plugin": "^0.11.5","netlify-cms": "^2.0.9","prop-types": "^15.6.2","react": "^16.4.2","react-helmet": "^5.2.0","react-redux": "^5.0.7","react-router-dom": "^4.3.1","react-router-redux": "^4.0.8","redux": "^4.0.0","redux-logger": "^3.0.6","rellax": "^1.6.2","uuid": "^3.3.2"}, -
Hey Jack,
Thanks for getting back to me. If I comment out "Draggable and Throwprops" I can get the build to run.
My stack includes Gatsby and Netlify Cms also.
I had all this working until I ran updates. I changed all the imports.
import TweenLite from "gsap/umd/TweenLite";import TweenMax from "gsap/umd/TweenMax";import Modifiers from "gsap/umd/ModifiersPlugin";import Draggable from "gsap/umd/Draggable";import ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";Receiving the error below:
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND 389 | return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM))); 390 | }, > 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. | ^ 392 | _tempTransforms = [], 393 | _tempElements = [], 394 | _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container. WebpackError: navigator is not defined - Draggable.js:391 Function.<anonymous> ~/gsap/umd/Draggable.js:391:51 - TweenLite.js:107 Definition.check ~/gsap/umd/TweenLite.js:107:1 - TweenLite.js:130 new Definition ~/gsap/umd/TweenLite.js:130:1 - TweenLite.js:135 window._gsDefine ~/gsap/umd/TweenLite.js:135:1 - Draggable.js:19 ~/gsap/umd/Draggable.js:19:1 - Draggable.js:2477 Object._gsScope ~/gsap/umd/Draggable.js:2477:30 - Slider.js:4 Object._exports src/components/Slider.js:4:1 - index.js:5 Object.exports.__esModule src/pages/index.js:5:1
Package.json:
...
"dependencies": {"@babel/runtime": "^7.0.0-beta.56","babel-runtime": "^6.26.0","bulma": "^0.7.1","classnames": "^2.2.6","gatsby": "^1.9.277","gatsby-cli": "^1.1.58","gatsby-link": "^1.6.46","gatsby-plugin-netlify": "^1.0.21","gatsby-plugin-netlify-cms": "^3.0.0-beta.1","gatsby-plugin-react-helmet": "^2.0.11","gatsby-plugin-sass": "^1.0.26","gatsby-plugin-sharp": "^1.6.48","gatsby-remark-images": "^1.5.67","gatsby-source-filesystem": "^1.5.39","gatsby-transformer-remark": "^1.7.44","gatsby-transformer-sharp": "^1.6.27","gsap": "^2.0.1","history": "^4.7.2","lodash": "^4.17.10","lodash-webpack-plugin": "^0.11.5","netlify-cms": "^2.0.9","prop-types": "^15.6.2","react": "^16.4.2","react-helmet": "^5.2.0","react-redux": "^5.0.7","react-router-dom": "^4.3.1","react-router-redux": "^4.0.8","redux": "^4.0.0","redux-logger": "^3.0.6","rellax": "^1.6.2","uuid": "^3.3.2"}, -
I recently updated my gsap node module and keep receiving the following errors with the new update. This is happening with both draggable and throwPropsPlugin js files. Any thoughts on a work around?
my js file:
import * as TweenLite from "gsap/umd/TweenLite"; import * as TweenMax from "gsap/umd/TweenMax"; import * as Modifiers from "gsap/umd/ModifiersPlugin"; import * as Draggable from "gsap/umd/Draggable"; import * as ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";
......
Erros:
WebpackError: navigator is not defined
- Draggable.js:391 Function.<anonymous>
~/gsap/umd/Draggable.js:391:51- TweenLite.js:107 Definition.check
~/gsap/umd/TweenLite.js:107:1- TweenLite.js:130 new Definition
~/gsap/umd/TweenLite.js:130:1- TweenLite.js:135 window._gsDefine
~/gsap/umd/TweenLite.js:135:1- Draggable.js:19
~/gsap/umd/Draggable.js:19:1- Draggable.js:2477 Object._gsScope
~/gsap/umd/Draggable.js:2477:30- Slider.js:4 Object._exports
src/components/Slider.js:4:1- index.js:5 Object.exports.__esModule
src/pages/index.js:5:1 -
TweenMax.set(".box", { x:function(i) { return i * boxWidth; } });
this solved it
-
3
-
-
Thanks @Rodrigo - looks like all the images are stacked however? Anythoughts?
This doesn't seem to work.
for (var i = 1; i <= numBoxes; i++) { var box = document.getElementsByClassName("box"); TweenLite.set(box, { x: i * boxWidth, width: boxWidth, height: boxHeight }); }
-
This code was inherited from @blakebowen draggable loop however his implementation is using jQuery and I am trying to convert to regular JS.
Any thoughts on why this may not be firing?
var $overflow = document.getElementById("overflow"); var $viewport = document.getElementsByClassName("viewport"); var $wrapper = document.getElementsByClassName("wrapper"); var $boxes = document.getElementsByClassName("boxes"); var $proxy = document.getElementById("box1"); //$("<div/>") var numBoxes = 4; var boxWidth = 350; var boxHeight = 250; var imgWidth = boxWidth - 6; var imgHeight = boxHeight - 14; var viewWidth = $viewport.offsetWidth; var wrapWidth = numBoxes * boxWidth; var progress = 0; var xMin = 0; var xMax = 0; TweenLite.set([$wrapper, $viewport], { height: boxHeight, xPercent: -50 }); TweenLite.set($boxes, { left: -boxWidth }); // for (var i = 1; i <= numBoxes; i++) { // // var src = "https://unsplash.it/" + imgWidth + "/" + imgHeight + "?random=" + i; // // var num = $("<div class='num'/>").text(i); // // var img = $("<img />", { src: src, width: imgWidth, height: imgHeight }); // //var box = $("<div class='box'/>").append(img).append(num).appendTo($boxes); // var box = document.getElementsByClassName("box") // console.log(boxWidth) // TweenLite.set(box, { x: i * boxWidth, width: boxWidth, height: boxHeight }); // } var animation = TweenMax.to(".box", 1, { x: "+=" + wrapWidth, ease: Linear.easeNone, paused: true, repeat: -1, modifiers: { x: function(x, target) { x = x % wrapWidth; target.style.visibility = x - boxWidth > viewWidth ? "hidden" : "visible"; return x; } } }); Draggable.create($proxy, { type: "x", trigger: ".wrapper", throwProps: true, // onDragStart: setRange, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { x: snapX } }); $overflow.on("change", applyOverflow); $(window).resize(resize); function snapX(x) { return Math.round(x / boxWidth) * boxWidth; } function updateProgress() { // var norm = normalize(this.x, xMin, xMax); animation.progress(this.x / wrapWidth); } function resize() { viewWidth = $viewport.width(); animation.render(animation.time(), false, true); } function applyOverflow() { if($overflow.prop("checked")){ TweenLite.set(".wrapper", {overflow:"visible"}); }else { TweenLite.set(".wrapper", {overflow:"hidden"}); } }
See the Pen YvpRNa?editors=1010 by anon (@anon) on CodePen
-
Thanks guys! I ended up running into another problem now ?
-
It looks like the dragging on the y axis is enabled however. Shouldn’t lockAxis prevent this?
-
Solid, Thanks guys!!!
-
Is it possible to have multiple drag instances? Attached pen keeps failing...
var count; for(count = 0; count < 2; count++){ console.log(count) Draggable.create("box" + count, { bounds:"#container", edgeResistance:0.5, throwProps:true, lockAxis:true, onDrag:function() { TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x}); }, onThrowUpdate:function() { TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x}); } }); }
See the Pen RJoWEO?editors=1100 by anon (@anon) on CodePen
Converted to typescript and now seeing this error. Expected 2-3 arguments, but got 6.
in GSAP
Posted
Thanks @OSUblake - yep, just caught what I was doing wrong. Thanks for looking into it