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. Ah! I don't think that this showed up for me when I looked again. I refreshed and see it! Thanks.
  2. 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. 😄
  3. 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
  4. That makes sense. I think the fact that it never gets attached to the DOM had me confused / surprised. Thanks again for everything!
  5. After a bit more tweaking: https://codepen.io/chucktaylor/pen/vYxLBZx
  6. @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
  7. 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
  8. 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))
  9. 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
  10. 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.
  11. Hey everyone, This really isn't a question, but rather I wanted to share another possible use for the scrolltrigger plugin, which I had not seen mentioned. Using the callbacks provided from the plugin, I have experimented with using scrolltrigger to lazy load videos on my website. I am basically following the guides provided by Google at: web.dev/lazy-loading-video/ In their example, they give their video source a data attribute such as data-src="myVideo.mp4" Then their javascript, when triggered, replaces the video's src attribute with that referenced in the data-src attribute. Lastly they call load() on the video to get the resource. The great thing with ScrollTrigger in this case is that not only is the amount of code needed a lot less, but you have full control over when the lazy loading is triggered, as you can set the trigger start value to whatever you want. You can see this working at my website chucktaylor.dev I'd be happy to know if anyone sees any potential issues with this use of the plugin.
  12. Thank you kindly Zach, your solution did the trick. Not sure why I had the jump in my case. I am starting with both divs having a width of 50%. When the animation starts, I was animating the LEFT div width to 100%, and the RIGHT div width to 0. For whatever reason, this causes a 'jump' on frame one. However, in your solution, you set the LEFT div flex-grow: 1, and simply animate just the RIGHT div width. This seems to eliminate the problem I had. Thank you.
  13. I am trying to animate a layout change in which I have two divs side-by-side using flexbox. I want to animate the div on the right to appear to be moving off-screen right, while the one on the left expands to take up the full container width space. Currently I keep getting a 'jump' in the width of these divs at frame 1. GSDevTools is enabled in this pen to see what happens when the timeline is advanced to the first frame. Later, for mobile I will be doing a similar thing. However on mobile, I will have two divs stacked on top of each other. I want the top one to go away, which will shift the bottom one up. I guess in this second scenario, I will simply animate the height of the upper div to 0, and make sure I have overflow set to hidden.