Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


Popular Content

Showing content with the highest reputation on 08/11/2019 in all areas

  1. 2 points
    Again, this is going back to what I said earlier. Just load your GSAP files through normal script tags. Nuxt is going to try and run stuff as server side code.
  2. 2 points
    Ha, you're the king of super long, complicated posts today Are you just making suggestions for potential feature additions to Draggable? Or was there a problem/bug you wanted to report? I'm not 100% sure I follow all that you wrote, but I'll mention a few things (none of which may be helpful): If you need both x and y involved in a snap, that's supported and here's a demo: https://codepen.io/GreenSock/pen/wgapaY If you want to sense the direction of the drag, there's getDirection(): https://greensock.com/docs/Utilities/Draggable/getDirection() We didn't implement *= or /= or %= because they're just not that useful and implementing them would force ALL users to pay the performance and kb hit for something that probably 0.00001% of the users may actually tap into. It just didn't seem like a good tradeoff. Your demo showing that scale:+=0.5 affected scaleX and scaleY seemed to work exactly as I'd expect. Am I missing something? Why would you not thing it'd affect scaleX and scaleY (scale, after all, is just a shortcut to affect scaleX and scaleY). If you still need some help with something, yes, it'd be REALLY good if you provided as reduced a test case as possible and please keep the threads focused on one question at a time if you don't mind. It's totally fine if you open a few different threads - it's just too convoluted and confusing for people to follow when a whole bunch of things are mashed into one really long post Have a good night!
  3. 1 point
    Hi @Greensock / Jack & @OSUBlake Thank you for helping. As a quick reminder, I am using the cloudfare CDN's to import all of the non-premium gsap files in the opening script tag of my nuxt.config.js file. I've had the premium ones working on my local server, but hit this new issue while trying to generate files to upload to real webhost. As for the link from @Dipscom, I think I'd read that, but don't think I quite got it last week. Now I understand its importance better. And for the four plugins that were giving me error statements, if I require those inside of the if(process.client) { **requirePluginsCode** } statement as opposed to just importing them in the general script tag, that gets rid of the errors and allows me to use "npm run generate" to successfully generate a dist folder. Uploading those files to my webhost results in a working site. GSDevTools doesn't seem to be working, but I'll go back and review proper usage tomorrow since I may have just messed up something simple there. I think the rest of the tools are working, but will go through and check that more carefully over next couple of days since I'd deactivated a bunch of functions and commented various things out as I was trying to isolate the problem and just get a minimal build generated and uploaded. In terms of Tree Shaking, I placed this in my script tag: import CSSPlugin from "gsap/umd/CSSPlugin"; and this within the if (process.client) { } statement: const myPlugins = [CSSPlugin]; Is that the (a) correct way to do it? Thanks for all of the help.
  4. 1 point
    I noticed the topic on Draggable and I just wanted to chime in FWIW. Just a quick question on why your using click? Click is pseudo event which is created by the browser after a mouse down and corresponding mouse up. If you change you code to use the pointer events then it will work with all types of input and not just clicks.. adrag.addEventListener("pointerup", clickHandler); Then you can modify your click handler like this: if (dragger && dragger.isDragging) return; You should also store the dragger after you create it where you store nClicks like so: var nClicks = 0, dragger; Then assign it after you create arr... var arr = Draggable.create("#adrag", { ... dragger = arr[0]; With those changes I don't see any double click issues. https://codepen.io/juliusfriedman/pen/NQOaLx Also I wouldn't prevent the default as the object was just made draggable there, I would let GSAP handle the bounds with the bounds appropriate. If you need to preventDefault then you will also need to do so for the mousedown / pointerdown which precedes the click event to cancel it. Let me know if I can help further! You can see an example of how I used Draggable here: https://codepen.io/juliusfriedman/pen/BXqdMv That reduces your example to: var resetClicks = function () { nClicks = 0; showNumberClicks(); }; var clickHandler = function () { if (dragger && dragger.isDragging) return; nClicks++; console.log("clicked " + nClicks); showNumberClicks(); }; var showNumberClicks = function () { var el = document.getElementById("adrag"); el.innerHTML = nClicks + " click" + (nClicks === 1 ? "" : "s"); }; var nClicks = 0, dragger; var doOnLoad = function() { var adrag = document.getElementById("adrag"); var arr = Draggable.create("#adrag", { zIndexBoost: false, cursor: "inherit", type: "top,left", force3D: false, allowEventDefault: true, allowContextMenu: true, edgeResistance: 0.35, bounds: "#container", allowEventDefault: false, throwProps: false, liveSnap: false, onClick: function (event) { clickHandler(); } }); dragger = arr[0]; }; doOnLoad(); Which has been verified here: https://codepen.io/juliusfriedman/pen/NQOaLx And has no issues that I can tell..
  5. 1 point
    Hey @Its_Lefty, Welcome to the GreenSock Forum. Here is another approach to achieve the desired. https://codepen.io/mikeK/pen/JgXBbw But please note the effects of such scrolling and debounce or throttle the event - more here "debouncing-throttling-explained-examples".. Happy tweening ... Mikel
  6. 1 point
    Hi @Its_Lefty, Welcome to the forums. Based upon the example site you showed, I feel the below examples may help you better achieve your goals. https://codepen.io/jbsmith731/pen/dWvRBX https://codepen.io/ethanwalpole/pen/xorjLK https://codepen.io/PointC/pen/zaBYoW Hopefully something within those examples will help your efforts. Again welcome to the forums. [ EDIT: Did some formating change on the forum that is parsing the links? Instead of just posting a link it parses it to "See the pen..."]
  7. 1 point
    Fantastic, that did it! I can't begin to thank you enough with helping me through this process. I'll be updating the following Codepen so that anyone who should stumble across this can see how it all came together. Many thanks!
  8. 1 point
    I've been working with JS for about 10 years now ... but I'm not going to even try to fake it ... OSUBlake is the JS rockstar here! One of the things I've tried to do over the past few years is write JS (and HTML & CSS too, for that matter) as generically as possible and allowing data-attributes to be the value containers for ever-changing environments. This helps (me) keep the JS clean and lean and also gives me a nice place to inject initial values from the server. I work with CMSs a lot and I really like to give control to content teams to create dynamic, configurable elements, and for me the cleanest way to translate their "settings" to a template file is to pass those initial values into data-attributes that the JS can then hook into rather than injecting <script> blocks to pass those values. When watching a live DOM, it's also nice to see those attributes updating right on the elements, especially when addressing an issue. But, more importantly, to OSUBlake's and PointC's points ... it's all about identifying and addressing the problem/challenge (the "what") and much less about JS (or any language). Once you get comfortable breaking it down into logical/modular chunks, even written in plain English, the "how" part starts with poking around in API documentation (vanilla JS, jQuery, GSAP, etc.) and eventually you do that enough to not have to make too many trips back into the docs (side note: I still make trips to the docs ) Once you separate the logic from the language(s) in terms of a mindset, it becomes much more clear which steps you need to take ... and then you determine what markup, functions, methods, and syntax will get you there.