Jump to content
Search Community

oppodeldoc

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by oppodeldoc

  1. Excellent, thank you for the reply and explanation. Your modified code works great for what we're doing. The snap value is weird because I was playing around with different values to try to get it to work in my minimal demo and I think I focused on that one because it reproduced what I was thinking was an intermittent problem so... negative feedback loop confirmed! By way of understanding this though... are you saying that the jumpiness caused by the zero duration and the fact that some of them never started at all is expected behavior? I tried a lot of different stuff here, including attaching it to each element individually (as in the commented out code I used) and settTmeouts and stuff like that. I guess this all boils down to just needing to set the snap number to a sensible value or not at all? Thanks again for all the help, I'm just curious how the random function snap value relates to all of this and if it returning zero even though the range was set between 1 and 4 is expected. Thanks again! -Matt
  2. Hi there, and first off thanks so much for all the support and work on GSAP, it is amazing! We're working on a project where we'd like to have several (like 5-6) dots looking like they are floating a bit. GSAP makes this very easy and we created a simple looping animation that works well on a single element floating around like this: const float = { x: 'random(-20, 20, 5)', y: 'random(-20, 10, 3)', duration: 'random(1, 4, 2)', ease: 'sine.inOut', repeat: -1, repeatRefresh: true, } const floatingThing = gsap.to('.floatMe', float) The motion is just what we want... randomized within a range and nicely spaced out. Looks great! The problem is, when we try to simply apply this effect to multiple elements (like more than 2 or 3), it starts to wig out on us intermittently. Sometimes everything floats, sometimes a couple dots don't tween at all, and other times we get a dot that jumps instead of tweens. I attached a minimal demo, you may need to reload it a couple times but you should see it. I've also attached a short screen capture of the problem (check the dot all the way to the left and you'll see it jump instead of tween). Is there something I'm missing here about repeats or random animations? I've tried lots of variations, including applying separate tweens to each element, using a setTimeout to start the animations at different times... all to no avail. Is this a bug with GSAP or is my approach wrong? Any help appreciated! I could try and hand roll this but we're using GSAP heavily in this project and it's tantalizingly close! Thanks again. -Matt Screencap: floatingBugGsap.mp4
×
×
  • Create New...