smackdab

Yes, @Carl! That's exactly the kind of help I was looking for. I won't have time to adapt this to my application until tomorrow, but the fromTo() sure looks like it's going to solve my problem. But by sending me such a helpful answer, I fear you've only encouraged others to submit questions without code examples. I'm kidding! I realize it's much easier to understand questions when they include examples, so thanks even more for putting together an example of your own.

Imagine a page with two simple gsap.to animations. The first animation moves a box from its original position at the left margin to a new position 25% across the page to the right. The second animation moves the box from its second position to a third position that is an additional 25% across the page. Now imagine triggering the two animations using scrolltrigger. The scrolltrigger statement for the two animations includes a toggleActions statement of: "play none none reverse". The problem is that when I'm reversing scroll from the third state back to the second state by scrolling up from the bottom, the box returns to its original position at the left margin, not to its second position 25% across the page. My question is: how can I get the "reverse" from the third position to get the box to go to the second position rather than to the box's original position? I know I should provide a codepen here, but I'm very new to GSAP and having trouble getting even a simple codepen on this. Thanks for any help.

Aha! Got it. This makes perfect sense. Huge thanks, everyone, for all this help. I'll try what you've suggested, but I don't see I any reason why this approach wouldn't give me what I need in terms of fixing the fast scroll problem with fastScrollEnd and preventOverlaps. Should be just what I need! Thanks again.

Thanks, @Cassie. That's what I feared. One thing that crossed my mind, and maybe this is what you're suggesting, is that I could build the objects (svgs, in my case) with d3, but control any animation (mostly opacity transitions, but also occasionally some movement of various elements that are part of the svgs) with gsap / ScrollTrigger. Meaning that I'd use d3 to build stuff and ScrollTrigger to move that stuff around, replacing d3 transitions with gsap animations. That way I could get the benefit of d3's very granular chart building (which I love) as well as the benefit of scrollytelling capabilities with ScrollTrigger. Does that make sense? Would that work?

Ok, ok, uncle. Here's some code below. Let's see if this helps. The code shows three of the many steps that I'm using in my ScrollTrigger setup. The first sets up the scrollytelling area on the page, the second two create d3 animated charts in that area. As you can see, the actual d3 chart creation work happens in functions not shown here (drawHist and redrawHist). There are transitions happening within the d3 functions that render some svgs (and also some transitions that you can see here in the ScrollTrigger calls). Those transitions are the source of the fast scroll problems, I believe. The setTimeout statements in the onLeave and onLeaveback properties of the first ScrollTrigger are basically my hacky workarounds for not having fastScrollEnd and preventOverlaps available to me. They just wait for a second to let the animations catch up after a fast scroll past the scrollytelling area in either direction, and then put the animations into the state I want them to be in. Obviously not an optimal approach. Thoughts on getting fastScrollEnd and preventOverlaps to work here, anyone? Big thanks for any help. ScrollTrigger.create({ trigger: ".bar-chart-steps", start: "top 0%", end: "bottom 80%", pin: ".to-pin", pinSpacing: false, onEnter: function() { }, onLeave: function() { setTimeout(function() { d3.selectAll(".container1 .chartArea").remove() d3.select("#blahblah .chartTitle").text("blahblah") } , 1000) }, onLeaveBack: function() { setTimeout(function() { d3.selectAll(".chartArea").remove() drawHist("foo", undefined, "large", 1); }, 2000) }, markers: false, }) ScrollTrigger.create({ trigger: "#step1", start: "top top", end: "bottom 80%", onEnterBack: function() { console.log("enter back 1") redrawHist("larger"); } }) ScrollTrigger.create({ trigger: "#step2", start: "top 20%", end: "bottom 80%", onEnter: function() { redrawHist("smaller"); }, onEnterBack: function() { d3.selectAll(".histDiv") .transition() .duration(1000) .style("opacity", 0) .on("end", function(){ d3.selectAll("svg").remove() .transition() .duration(1000) drawHist("bar", 90, "large", 1); }) } })

Thanks! But honestly, the effort to condense my very large codebase down to something the community here could understand would be extremely time consuming. Yes, I could build a toy example that has nothing to do with my actual code, but before I do, can I just ask what you mean by "an accessible progress value"? I'm using simple d3 transitions. I don't know of a way to access the state of a d3 transition between its start and end, but is that what you mean? Any d3 experts (I'm certainly not one) want to weigh in? Here's what chatGPT had to say about the matter of accessing transition progress: In D3, the transition API does not provide a built-in way to directly access the progress or status of a transition between its start and end points. The transition system in D3 is designed to abstract away the details of the intermediate steps and provide a smooth animation between the initial and final states. However, you can work around this limitation by using the on() method provided by the transition object to attach custom event handlers. By combining on("start", handler) and on("end", handler), you can get some insights into the transition's progress. Here's an example: javascriptCopy code // Create a transition var transition = d3.transition() .duration(1000) .on("start", transitionStart) .on("end", transitionEnd); // Transition start event handler function transitionStart() { console.log("Transition started"); // You can perform actions or track the start time here } // Transition end event handler function transitionEnd() { console.log("Transition ended") // You can perform actions or track the end time here } ); // You can perform actions or track the end time here } In the above example, when you start the transition, the transitionStart function will be called, and when the transition ends, the transitionEnd function will be called. Inside these functions, you can perform any actions you need or track the start and end times of the transition. Keep in mind that this approach does not provide direct access to the current progress or status of the transition between its start and end points. Instead, it notifies you when the transition starts and ends. If you require more fine-grained control or access to the intermediate states, you may need to implement custom logic using timers or tweens.

Thank you very much. You've answered my question: I can't use fastScrollEnd and preventOverlaps with d3 animations. No need for the massive effort that would have been associated with condensing my project down to something codepennable when the answer is this simple. Much appreicated!

I'm using ScrollTrigger combined with d3. Specifically ScrollTrigger is handling the scrollytelling aspects of firing off certain d3 animations on the page. All is working great, except for problems that come up with fast scrolling. I've set fastScrolledEnd and preventOverlaps to true in my scrollTrigger object, but it's having no effect. Is that because the animations are d3 instead of gsap, or is there something I'm doing wrong? Any suggestions, anyone?