Jump to content

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


  • Posts

  • Joined

  • Last visited

About trych

  1. 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!
  2. 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.
  3. @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?
  4. 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.
  5. 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!
  6. 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.
  7. Hi there, I was wondering if there is a simple way to change a property by a certain factor. I know you can set relative values by using addition and subtraction, like so gsap.to(box, { width: '+=200', height: '-=50' }); So I am somewhat confused why you cannot do the same thing with multiplication and division like so gsap.to(box, { width: '*=2', // multiply the current value by 2 height: '/=2' // divide the current value by 2 }); ? This would seem rather logical to me, since *= and /= are standard JS operators just as += and -=. Since this is not possible apparently, is there a simple alternative? The simplest way I could come up with was gsap.to(box, { width: (ix, target) => gsap.getProperty(target, 'width') * 2, height: (ix, target) => gsap.getProperty(target, 'height') / 2 }); which seems quite complicated for such a standard thing as doubling a property value. Is there any simpler alternative that I am missing? Thanks a lot!
  8. Yes, exactly. And ideally also in a way that does not "restart" the duration, so that the animation always finishes after 4 seconds, no matter what.
  9. Hi there, I am animating a shape towards another shape. However, during the tween there might be a user interaction that changes the target of this animation. In this case I would like to *smoothly* change the ongoing animation so it moves towards the new target. I don't quite understand how to achieve this. When I use separate tweens, then it (obviously) just interrupts the current tween and starts a new one from the current position, which does not look smooth at all (especially with an ease like expo.inOut). In the codepen, when you first click the red target, the circle starts moving towards it. When you now click the blue target, while the circle is still moving, it starts a new tween that moves towards the blue target. I would like to change the setup so that clicking on the blue target continues the current tween, but lets it end at the blue target. Any idea, how to achieve this? Thank you!
  10. Oh wow, such a simple fix. Thanks a lot, works really well. Also, I noticed, when the Draggable instance is create via `new Draggable()` instead of `Draggable.create()`, you do not get an array, so I just used this instead now. Thanks again!
  11. Hi there! I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds). The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position. How can I change my setup to make sure that the slider stays within the bounds at all times? Thanks!
  12. Ok, seems I can answer my own question. When I use the doc's onUpdate example in this setup, I get back something like this on page load: 5.11247182388966e-7 1 true. So it seems like after page load the ScrollTrigger animation has already started ever so slightly. I fixed my issue now, by giving the ScrollTrigger a starting value of 1 pixel, then it will fire the onStart callback correctly.
  13. Hi there! I have created a timeline that I control via a ScrollTrigger. When I load the page I am right at the beginning of that scroll animation (as in, as soon as I start to scroll, the timeline starts). The ScrollTrigger's onEnter event fires right on page load, but the onStart event does not fire at all, even when I start scrolling. Is this the expected behavior? If so, what is a good way to fire a single event once the scrolling animation has started? Thanks! trych
  14. Ah, of course. I was missing that this was referring to the proxy object. Thanks, works great now! Performance is also good, even without the will-change.