Jump to content
Search Community

elrojo

Members
  • Posts

    13
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

elrojo's Achievements

3

Reputation

  1. Thanks @OSUblake - yep, just caught what I was doing wrong. Thanks for looking into it
  2. 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 TweenMax Expected 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}) ) ); }); }
  3. 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" },
  4. 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" },
  5. 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
  6. TweenMax.set(".box", { x:function(i) { return i * boxWidth; } }); this solved it
  7. 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 }); }
  8. 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"}); } }
  9. Thanks guys! I ended up running into another problem now ?
  10. It looks like the dragging on the y axis is enabled however. Shouldn’t lockAxis prevent this?
  11. 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}); } }); }
×
×
  • Create New...