rag

This works perfectly, thank you for your help!

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

@GreenSock that would be great! I'll PM you my email.

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!

OMG, ok never would thought it had anything to do with react. That fixed it. Thanks!

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

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!

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.

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?

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?

I can imagine that, yeah. Just tried with allowNativeTouchScrolling:false, exactly the same behaviour.

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 (37.0.0.0)), 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

Yes, that did the trick. Thanks!

Cool, thanks, I'll keep an eye on this thread!

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.