Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About rag

  • Rank

Recent Profile Visitors

1,074 profile views
  1. Hi guys, is it possible to fade an element in, after scrolling lets say 120% of the viewport? The element is a fixed element (back to top button). I tried using the position of the .header element (top navbar) and trigger the animation, when the .header is 500px out of the viewport. gsap.to(".js-back-to-top", { scrollTrigger: { trigger: ".header", markers: true, start: -500, onToggle: self => console.log("toggled, isActive:", self.isActive), }, autoAlpha: 1, }); thank you for your help
  2. 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 fi
  3. OMG, ok never would thought it had anything to do with react. That fixed it. Thanks!
  4. 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 fi
  5. 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!
  6. 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.
  7. 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?
  8. 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?
  9. I can imagine that, yeah. Just tried with allowNativeTouchScrolling:false, exactly the same behaviour.
  10. 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
  11. Yes, that did the trick. Thanks!
  12. Cool, thanks, I'll keep an eye on this thread!
  13. 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