Jump to content

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

Chuck Taylor

  • Posts

  • Joined

  • Last visited

About Chuck Taylor

Recent Profile Visitors

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

Chuck Taylor's Achievements

  1. Thanks @OSUblake. I saw in your code that you had setup your own drag handlers to work with Raphael. I'll study the implementation you came up with in that example you had done.
  2. So I tried to take it a step further and have it so the 'handles' felt solid and could not overlap. I had a number of failed attempts using Draggable.hitTest() and the InertiaPlugin. I later found another post , where @OSUblake demonstrated a solution using Separating Axis Theorem, and the package https://github.com/jriecken/sat-js for handling this. As that post is a bit over 3 years old and the package has not seen much in terms of updates, I just wanted to see if that would still be a recommended solution, or is there another package anyone is aware of for helping with this, which may offer any additional benefit? I mean math is math, so I can certainly see why it hasn't had much in terms of updates. Just thought I'd check if anyone was aware of any additional solutions that might assist in this.
  3. Was not familiar with ModifiersPlugin, thanks for sharing that! 🤯 Now that the kiddos are in bed, I'm going to take a better look at this. Thank you as always for pointing me in the right direction @OSUblake!
  4. Thank you both for taking the time to look at this. I feel like every time I come on this forum with a question @OSUblake swoops down and points out some utility function I wasn't aware of! @iDad5 To answer your question about what I hope when the two handles meet; It would be ideal if they felt solid. So if the blue handle was at a target, and the red one was dragged in, the red one would 'hit' the blue one and not overlap. The blue one would stay put though. This is partly why I was wondering if I might try using Draggable.hitTest() in addition. @OSUblake, thank you for taking the time to add to this with some sample code to get me in the right direction. I would love to better understand the arguments being used in one of the functions. I see now in the docs that we can supply: a function-based value to run your own snapping logic, like liveSnap: {points: function(point) { //run custom logic and return a new point }} I see now that this is the approach you took. What is the 'point' argument in that function, and where does it come from?
  5. Here is a basic demo with two handles - one red and one blue. I have two yellow circles showing as snap points. I want to make it so that the handles can snap to either of the yellow circles, but only if it is not already 'occupied' by a handle. So essentially the two handles cannot snap to the same target point at the same time. I see the liveSnap property accepts a function, so maybe this is where the magic will happen, but I'd love anyone's thoughts on this if they have run into a similar issue. Perhaps Draggable.hitTest() might be a good thing to combine as well...
  6. Ah! I don't think that this showed up for me when I looked again. I refreshed and see it! Thanks.
  7. Just thinking how I work, (and this is clearly not everyone), my default workflow is I add the plugin to my project (intellisense in my editor allows me to see all the plugins pretty easily while doing the import). Then, I try to just have something basic work, and if that is not going as planned, I check out the docs. I'm used to reading in most of your documentation clarifications or overview explanation near the top before you get into methods and properties that can be played with. So perhaps clarifying that CustomEase is a dependency of CustomWiggle and must be included in your project (as opposed to just mentioning that it extends CustomEase), would be the clearest? Again, this is just likely a result of my workflow, but as a result of it, I really don't default to installation notes to see this information. Lastly, thank you for this plugin extension! An old one, but a good one! I was able to get the effect I was after in about 6 lines of code (x, y, and rotation separated) and quickly iterate over variations to find the result I was after. WAAAAY better than fiddling with paths in illustrator and going back and forth over and over again. 😄
  8. Hi, I just spent a fair bit of time trying to get a basic CustomWiggle to work. I'm importing via npm, so I use import { gsap } from 'gsap' import { CustomWiggle } from 'gsap/CustomWiggle' gsap.registerPlugin(CustomWiggle, CustomEase) I created a rather simple wiggle animation, and was hit with an error coming from CustomWiggle.js indicating that yEase is not a function. I came to the forums, but couldn't find anyone having a similar issue. (Probably all asking about ScrollTrigger 😆). Anyway, after a few hours, I tried adding the CustomEase as well to my project. import { gsap } from 'gsap' import { CustomEase } from 'gsap/CustomEase' import { CustomWiggle } from 'gsap/CustomWiggle' gsap.registerPlugin(CustomWiggle, CustomEase) This fixed the problem for me. While the docs state : it doesn't go far enough to indicate that you must include the CustomEase script in order for it to work. https://greensock.com/docs/v3/Eases/CustomWiggle I am using gsap 3.8.0
  9. That makes sense. I think the fact that it never gets attached to the DOM had me confused / surprised. Thanks again for everything!
  10. After a bit more tweaking: https://codepen.io/chucktaylor/pen/vYxLBZx
  11. @OSUblake That's the trick! I didn't know about the wrap utility. I'm going to check out the others. You have been a huge help! I am going to progress with the other functionality I aim to implement, but you have provided me with a big head start. Thank you again so much for your time! I did figure out the 'nudge' with .progress(0). That seemed to solve the loading. However, if you suggest both progress(1).progress(0), I'll go with that. Other question: What is the 'proxy' div doing in your code? It's not attached to the DOM. Just curious how it contributes. https://codepen.io/chucktaylor/pen/RwpWXOa
  12. Well. Some progress. First, I made a rather silly mistake in the css. The .cell classes had originally had a position: absolute, which I had 'temporarily' commented out as the numbers were not visible while working. 🙄 With that out of the way, at least the dial is a lot closer to what @OSUblake had already put together. The two 'gotchas' I am now facing are: The dial is blank on load - shows no numbers until we first start to drag down. Dragging up is problematic. I am currently console logging the value of this.y in the updateProgress(). Anytime y < 0, it locks up. I'm guessing the timeline is not 'repeating backwards' from 0? In the meantime, here is the pen with the css correction. https://codepen.io/chucktaylor/pen/mdWeNBJ
  13. Thanks again @OSUblake! The kiddos are in bed now, so I am going to fork what I had above and try a bit more this evening. My initial suspicion is with the chained add method when the 'animation' timeline is created. Mostly because I don't really understand what tweenFromTo is doing, but I'll read that a little closer now. .add(baseTl.tweenFromTo(1, 2))
  14. Thank you kindly for the quick response and for taking the time to share this solution with me. It has been well over a year since I have used GSAP, so I apologize if this is really basic. I tried to first move the older syntax to the newer - to hopefully better understand the code while refactoring. Looks like I muddled it somehow. I went through the docs v2 and compared it with the newer v3 docs, but I seem to have messed something up. Would someone be willing to take a peek at this and what @OSUblake was kind enough to share? I'm guessing it is something super obvious to anyone who uses this on a regular basis. What @OSUblake has put together is really nice, and certainly has the right feel on both desktop and mobile touch devices for what I am trying to achieve. I just need to get it to cycle through the numbers, and adjust the look so I'm only able to see 1 number and maybe a portion of the previous and next at any given time. I guess the last thing will be identifying the currently 'active' number. But baby steps! I believe in his example, he is piece by piece creating a larger timeline, and then 'scrubbing' that timeline with the drag functions? https://codepen.io/chucktaylor/pen/qBrOvYo
  15. I am working on a combination lock where there will be multiple dials with numbers from 0-9. To simulate a rotatable dial - similar to that found on luggage, I am using the Draggable plugin along with the InertiaPlugin. In my demo, there are a couple things to quickly note. First, in the end, the overflow on the dial portion will be hidden. I just show everything right now so that it is easier to understand what is happening. Second, while this demo results in an array of numbers which becomes eventually needlessly long, I plan to recreate a properly sized array at the end of the drag - perhaps in onThrowComplete callback. (Open to suggestions ) So the basic idea is this: I start off with an array of numbers. As the user drags up on the list of numbers, new digits are pushed to the end of the array. Dragging in this up direction works in the demo. The challenge is the other direction. When the user drags down on the number list, I need to add a number to the beginning of the array, while at the same time moving the draggable list up the same height. This is what I have not quite cracked. I have tried with limited success to get this work by calling Draggable.endDrag() followed shortly after by Draggable.startDrag() while the draggable item is being repositioned, but I was losing the inertia feeling. Going back to the array of numbers getting long, I was also doing something along the lines of numList.unshift(numList.pop()) and numList.push(numList.shift()) However, this will require the draggable element to be repositioned during both up and down drags.