smrdn

Thanks for the clarification. I noticed ScrollTrigger setting it to -0.001 while debugging and have been working around it by setting the start to "top -1" (just as you suggested yourself). The other issue is resolved with the latest version you posted, thanks!

Looks very promising, thanks for the update. I wasn't able to replicate the aforementioned issue anymore. However, I was getting an exception which wasn't there before: Another, related issue I discovered yesterday: When using a call (or in this case, a fake tween which calls another tween) placed at position: 0, scrolling all the way back up won't trigger onReverseComplete. See this new pen (which uses the updated ScrollTrigger.min.js) for an example: https://codepen.io/sebh/pen/jOwZNYE

Hey again, upon further investigation it turned out that the fix actually doesn't work. Well, at least not 100% of the time. To illustrate, I created another pen, only difference being that I added an additional section (https://cdpn.io/sebh/debug/OJgzRzZ/XxkVwKBojZoM). With that 3rd section, I am able to once again replicate the issue (see attached recording in my previous post).

Hey Cassie, thanks for the swift reply! Using a dummy tween to play the animation works like a charm, cheers! Regarding the other issue: The animation will only be skipped, if the last entry in the timeline is not a call too (sounds really weird, I know, but I wasn't able to find any other way to replicate the behaviour). I've edited the pen to ensure that the last timeline entry is not a call. Incidentally, your "workaround" also solves the other issue. If you could be so kind to try my pen again to replicate? A call being skipped still sounds like a bug to me. I've attached a recording. scrolltrigger-call.mp4

Hey guys, we've been able to achieve some amazing results using ScrollTrigger on our last project, thanks for the great work. However, two (probably related) issues arose, which I've successfully replicated on this pen. As you can see, we had to mix scrubbed animations with non-scrubbed animations. To achieve that, we've been using timeline.call (which then checks the current scroll direction). When you reload the page (i.e. the scroll bar is not at the beginning, but let's say in the middle of the timeline), you will notice that the called animations are not correctly updated. If you head over to the debug view (https://cdpn.io/sebh/debug/MWorgga/gaMeYdjwPRRM) and scroll right to the point which triggers the green box animation, then reload the page, you'll be able to scroll past it's animation without if ever being triggered. Interestingly enough, this issue no longer occurs if you comment out the last ("regular", i.e. scrubbed) animation (box-5). This leads right to the second issue we encountered. If you comment out the last animation you will notice that the previous (a called, aka non-scrubbed) animation no longer properly reverses. Well, I hope I did a half-decent job in explaining the issues. Thank you for your time. Edit: Please note that the attached pin on the thread doesn't work properly (probably because I used vh). Please open the pen in a separate tab.

OK, I see Glad your problem was solved.

Sounds to me like it's working as intended. Basically what happens is that it sets (like TweenLite.set) the values you specify as "from", and then animates them to your specified "to values". Edit: Why don't you just hide it via css and use a simple TweenLite.to if I may ask?

Here's the updated pen: http://codepen.io/sebh/pen/bfIzy?editors=001 To visualize the "drag while animation running" problem, I've implemented two animations. Clicking the next button will immediately set the Draggable proxy to the target destination. Clicking the previous button will update it while the animation is running. As you can see, neither works perfectly. The other problem is that, when you spam the buttons, you will see a slight jump in the animation. That happens because of the "silent set" I put in. If I move said set to after the animation and you spam the buttons, you will see the backwards movement again, simply because the first set hasn't been called when you click again. Edit: I've also changed the progress calculation in the onDrag method. There's no need for infinite repeats anymore.

I've created an updated pen: The "infinity part" is working great now. There is one slight problem though. In the previous version, the Draggable was updated in the onStart callback. The result was that when you grabbed the slider while it was moving from a button click, it jumped a little bit when the animation wasn't quite done (that makes sense I hope). I tried to put the Draggable updating part in the onUpdate callbacks. However, there still is a little "jumping" plus, you can't "spam" the buttons anymore (feels like overwirte "none"). If I remove the Draggable updating from the onUpdate callback, you can perfectly spam the buttons without breaking anything - but the "jumping" when you start dragging while the animation is running is even greater. Edit: Got some seriously bad math in there. Sorry for that! Edit2: I'm working on fixing this nonsense.

Absolutely, thanks a lot. I've tried that over the weekend (on the "real" code) actually, couldn't get it to work though. The problem was that multiple clicks would result in weird behaviour. Now that I think about it. This "weird behaviour" is actually quite hard to explain. I'll come back to you with an updated pen.

Thanks for the quick reply Carl. I have the feeling that my example pen was too abstract. The duration was a mere example (could've been 3.5 or whatever). I have created a more realistic pen of what I'm trying to build: http://codepen.io/sebh/pen/ILalC?editors=001 I havent disabled overflow so you can see the full animation. It's basically nothing more than an infinite slider. Which can be controlled by dragging and two buttons. I simply cannot get the behaviour right. The dragging works great. But I can't simulate the infinite scrolling with the buttons. Internally, progress values above 1 or below 0 are converted back to 0 <= progress <= 1 it seems. So if I were to just increase selectedElement forever, the animation would still just start all over again once it reaches the end. Edit: Just realized that I forgot to update selectedElement in onDrag. Since it's not that important, I'm leaving the code as it is.

Hey guys, I'm trying to animate the progress of a timeline with relative values. I have recreated the basics in this pen: http://codepen.io/sebh/pen/agsDx The problem is: I was under the impression that multiple clicks would basically add up, since GSAP analyzes if there are other tweens running. However, when you quickly click the button you will be able to leave the animation in an unwanted state (progress % step != 0). Does anyone have an idea what I'm doing wrong? I'm pretty sure I just missed a part of the documentation. Thanks in advance!

Thanks for the quick reply. I read the part saying "CSSPlugin accomplishes this under the hood by prepending a translate(x,y) to the normal matrix() ormatrix3d() that it sets on the element." However, i just wasn't sure about it triggering gpu acceleration.

Hey! Is it by design that both x and yPercent never use translate3d? Setting force3D to true simply appends a translate3d(0 ,0 ,0). Will that trigger gpu acceleration?