Jump to content


  • Posts

  • Joined

  • Last visited

  1. How would I do that? Like this? onLeft: self => { self.event.preventDefault(); } I'm not quite sure I understand. Is this because the preventDefault would only be part of the debounced action? Would it then make sense for expensive operations to create two Observers? One that only prevents the default and is not debounced and one that executes the actual action and is debounced? Or would that not work? Another question: the `allowClicks` property seems to be another undocumented property. Does this one take care of preventing click events on touch/drag style events? Because that is what I was actually trying to prevent and that might be helpful for me in my current project.
  2. Quick side question: Is this the "official" way to add a preventDefault to the Observer events? This options seems to be documented nowhere. What about stopPropagation? Does it work the same?
  3. While it seems that `.ratio` has been in the docs for a while, I think it would also be helpful to add a little info to the `.progress()` sub page that this gives you the value before easing. I thought I was going insane here, because I didn't know that.
  4. Ok, that is fairly confusing, if you don't know that that's how it works. I guess in that specific case it would have been more helpful if gsap refused to tween, but I understand why this parsing will be helpful in many cases. Yeah, the confusing part was mainly that the pixi setter worked with a simple number as input. Yes, although I read somewhere else on the forum that this only really works for simple pixi stuff. So I was not expecting it to work on one of pixi's fiter plugins. Might be wrong though. Anyways, I got it to work now. Thanks a lot for the help and the explanations!
  5. Oh, ok. This does indeed work. Now after investigating, why it didn't work in my case, I realize I actually did this: let settings = { size: pixiFilter.size }; gsap.to(settings, { size: 80, snap: "size", duration: 5, onUpdate: function() { console.log(settings.size); } }); And this does not work, because the pixiFilter actually does not return a number but an Array with length of two, like [10, 10]. Since gsap just started happily tweening (starting from the correct size value), I didn't even suspect that it couldn't be a number. Apologies, even though I assumed this simple case would have worked without a minimal demo, I now see I should have posted one ... 😞 So, what does gsap actually do in this case? Does it grab the array's first value and uses that for tweening? And should snap maybe also work in these cases? I mean, as long as gsap starts interpolating, as a user I would expect it to respect any additional settings as well.
  6. Ok, the snapping does not even work on a generic object: let settings = { size: 10 }; gsap.to(settings, { size: 80, snap: "size", duration: 5, onUpdate: function() { console.log(settings.size); } }); This gives me floating point values. Is the snapping plugin maybe broken in more recent releases? I am using v3.11.1 Edit: Sorry, this does indeed work, my specific example was slightly different, see my post below. As a workaround I could solve this with Math.round() like you suggested. let settings = { size: pixiFilter.size }; gsap.to(settings, { size: 80, snap: "size", duration: 5, onUpdate: function() { pixiFilter.size = Math.round(settings.size); } }); Should the non-working snapping be reported as a bug somewhere?
  7. How can I get the current interpolated value in my onUpdate callback?
  8. @Rodrigo, thanks for looking into this, and sorry for not responding earlier, somehow I missed that there was a reply. I gave your solution a try, however, it does not seem to work, unfortunately. Here is what I did: gsap.to(myFilter, { size: 80, snap: "size", duration: 5, onUpdate: function() { console.log(myFilter.size); } }); The onUpdate logging (for debugging) still reveals that the size is set to float values: Any idea what I could be doing wrong? Or how else to round this to whole numbers? Thanks!
  9. Hi there, I am trying to animate a filter in pixi.js using gsap. However, it seems that this filter's size property only works with integer values. So I would my gsap tween need to animate from let's say 10 to 80, but only to return integers for the inbetween values. How is this possible? gsap.to(myFilter, { size: 80, duration: 5 }); Thanks!
  10. I don't seem to be able to test this in my local setup (as the trial warning kicks in), but using it in the Codepen it seems to have fixed it! Thanks a lot for looking into this, I am really impressed by the speed and helpfulness of the Greensock team!
  11. Ok, understood, thank you. It would probably be a good idea to be a bit more explicit in the ScrollSmoother docs then, because it says <!--- ALL YOUR CONTENT HERE ---> and with all the magic that ScrollSmoother is doing, I was not sure, if it maybe also takes care of fixed positioned elements.
  12. @OSUblake Thanks for looking into this. I am still observing this, even when I remove the duration property from the snap object, although it seems to happen less frequently (and just once each time it happens, not endlessly in succession). As I said, it seems to be much easier to observe when you use it on a full size window. On another note: I noticed that fixed position elements that are included into the wrapping containers are not behaving like fixed position elements anymore once the plugin kicks in, i.e. they move out of the viewport once I start scrolling. Is this intended and am I supposed to move those elements outside the wrapping container (docs say to include ALL content within the wrappers)? Or might this be another bug?
  13. Hi there! I am really excited about the latest gsap updates and all the great functionality it comes with! So first of all: Thanks for the fantastic work on this! I tried to give the ScrollSmoother plugin a go in a project I am working on right now. The project has scrolltrigger snapping to snap to sections. When I now activate ScrollSmoother additionally, the snapping does not work correctly anymore. If I stop my scrolling between sections it starts jerking back and forth, and just occasionally snaps to the section eventually. I wonder, do I need to set this up differently, or is this something where ScrollTrigger and ScrollSmoother do not work together (yet)? For an example, see the included CodePen. Thanks a lot! Edit: I notice, the effect does not seem to be quite so bad on the little embedded CodePen iFrame. Maybe it gets worse the further the snap position is from its target position? To better observe the effect, maximize the window size on the CodePen sketch. Sometimes it keeps jerking back and forth endlessly.
  14. Thanks a lot! This does indeed work as expected. This is so much cleaner, I hope this makes it into an actual release. Thanks again!
  15. Thanks @GreenSock, that does clear things up. And thanks for the parse function. That will come in handy. However, I am not really conviced that *= would be a really uncommon use case. Judging by the projects that I have done with gsap so far, I need something like this literally all the time. And I always needed to work awkwardly around it, which does not feel very gsap-like. I mean there are now so many different notations to handle tween timing in the timeline, that it feels strange that the property manipulation is somewhat limited. If performance is an issue, I wonder, would it maybe be an option to just include the *= option (without the /=, because instead of /=2 one could of course just do *=0.5) and if that would keep the performance hit within acceptable limits? I really believe people could benefit from an option that allows them to easily scale a property value by a certain factor.