custom data-scroll-showCallback="drawIt()" not firing

[terwanerik]

custom data-scroll-showCallback="drawIt()" not firing

[terwanerik]

When are you setting the custom callback? How are you initializing the triggers? Is the callback in a custom callScope? Or is drawIt() a global (in window scope) function?

[thaoms]

I tried both scopes, but they give the same results.

Im setting the callback like this;
I tried removing the 'once' param and simulated it with a variable but no luck.

Chart is a chart.js plugin

<canvas data-scroll-showCallback="drawIt()" data-scroll id="myChart" class="pie-chart" width="290" height="290"></canvas>

const trigger = new ScrollTrigger({
			toggle: {
				visible: 'visibleClass',
				hidden: 'hiddenClass'
			}
		});
		let first = true;

		// triggered when in view
		window.drawIt = function() {
			if(first){
				myChart.update();
				first = false;
			}

		};

What i'm trying to do: do the animation of the pie chart when it scrolls in view.

[terwanerik]

Alright, and when you place define the callback first, and then initialize ScrollTrigger? E.g;

let first = true;

// triggered when in view
window.drawIt = function() {
	if(first){
		myChart.update();
		first = false;
	}
};

const trigger = new ScrollTrigger({
	toggle: {
		visible: 'visibleClass',
		hidden: 'hiddenClass'
	}
});

[thaoms]

That fixed it, so easy I didn't even see it.

Thank you!

[terwanerik]

Great, you could probably just set myChart as the callScope and just set data-scroll-showCallback to update() ;)

[thaoms]

When using a custom scope it actually doesn't work, neither an empty scope or using my chart.
So I'll go with window for now.

Might be something conflicting with the chart.js plugin.