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);
})
}
})