Jump to content


  • Posts

  • Joined

  • Last visited

About rag

Recent Profile Visitors

744 profile views

rag's Achievements


Newbie (1/14)



  1. Just wanted to chime in here, I have the same problem with the defaultView, using next-plugin-transpile-modules. I also have been using @Hossein Rahimis solution, but it's not perfect because it introduces issues with scoping. With next.js you can also dynamically import the plugin with something like const SplitTextPromise = import("gsap/SplitText"); and then in componentDidMount, wait for the promise to resolve SplitTextPromise.then(SplitText => { const split = new SplitText(); }); It has the same issues as the other method, but I find it slightly cleaner because you're not mixing require and import. Anyway, @GreenSock it would be really awesome if you could fix this so we can import the modules like every other module, this is the only headache that GSAP has been giving us for a long time now, otherwise excellent product!
  2. OMG, ok never would thought it had anything to do with react. That fixed it. Thanks!
  3. Hi, I've been using the Draggable for years without problems but today I can't seem to get it to work.. I made an extremely reduced test repo here: https://github.com/buesing/gsap-draggable-demo Initialization code is in https://github.com/buesing/gsap-draggable-demo/blob/master/src/App.js There's basically nothing there but a barebones draggable initialization. It seems to work, I'm even getting the move cursor when hovering over the red div, but it's just not draggable. Could somebody take a look at this? I've been searching for hours for possible causes, can't seem to find anything. Also tried downgrading to 1.x, no changes. Probably just missing a stupid detail. Run the test repo with: npm install npm start
  4. No, I can't be sure it's exactly 30fps. I think I'm better off with another tweening solution for this task then. Thanks!
  5. I think need it the other way around - this allows me to hook into GSAPs ticker, but I need GSAP to hook into my ticker. This is because CCapture runs some magic that makes requestAnimationFrame run slower while rendering the video.
  6. Hi, I'm exporting a canvas animation with CCapture. In that animation I have a repeating tween. As soon as I start capturing, the canvas framerate is dropping to about 30fps, but the Tweens FPS is still at 60, so in the exported video, the animation runs much faster. Is there a way to disable the requestAnimationFrame inside GSAP and manually call it's tick function? I could set the FPS to 30 but it's not really constant 30fps so I would end up with a tween with uneven timing. Or do you guys have any other ideas?
  7. I just figured out that reading the values out of e.changedTouches works. I did expect GSAP to normalize this though, but maybe I was wrong, is this out of scope or just a bug?
  8. I can imagine that, yeah. Just tried with allowNativeTouchScrolling:false, exactly the same behaviour.
  9. Hi, I'm running into a problem where the event data is not passed into the parameter of the draggables onClick. In iOS I'm at least getting pageX as expected, but on Android stock browser (called com.android.browser (, the behaviour is weird. Sometimes both values are 0 and screenX, screenY are undefined, sometimes the event is fired twice and the second time all values are correct. If you add if (e.pageX === 0 && e.pageY === 0) return; to the beginning of the onClick handler, you will see that once every couple taps, the alert will come up and the values will be there. Thanks
  10. Yes, that did the trick. Thanks!
  11. Cool, thanks, I'll keep an eye on this thread!
  12. Hmm, both these options don't help with this problem.. You can test it yourself here: https://codepen.io/mbuesing/pen/pRpPOX Also tried the cache busting url, also clearing the cache in the browser, still the same behaviour. What does help is using a static trigger element, in this case for example the entire svg. It needs to be as big as the drag can go to work. In my case that's not an option though, as there are multiple draggables on the page and the trigger elements need to move with them. I tried the proxy element, that also didn't work.. Do you have any other ideas? I realize this is because of a change in Chrome, but the codepen is a really simple (and I guess common) case that shouldn't make problems IMHO.
  13. Hi guys, I set up a very minimal test case here: https://codepen.io/mbuesing/pen/pRpPOX Setting up a draggable with type x or y on an SVG element causes a problem on Chrome on Android: I can't move the element more than a couple px at a time, and the drag is not smooth. I can see this behaviour on multiple Android devices. I first thought this might have to do with the fact that in Chrome, GSAP uses CSS transforms in SVGs instead of attributes, but since that changed in the last version and the problem still persists, I guess it's something else. In this case I could simply use a proxy object and set the cx/cy values of the circle, but the project I'm working on is much more complex, so I'd like to avoid that if possible. Do you have any ideas on how to fix this? Thanks!
  14. rag

    Scaled draggable snapping

    Cool! I will check those out and maybe come back if I have some questions. Thanks for your effort!