Hi,
I'm getting console errors "Cannot read properties of null (reading 'getContext')" and I'm not sure how to correct. My code is below. Thanks!
dev: https://dev-adi-cpm.pantheonsite.io/payers/
// wait until DOM is ready
$( document ).ready(function() {
const canvas = document.getElementById('sensil-product');
const context = canvas.getContext('2d');
canvas.width = 2085;
canvas.height = 1390;
const frameCount = 36;
const currentFrame = index => (
`/wp-content/themes/cpm/template-parts/sensil/${(index + 1).toString().padStart(4, '0')}.jpg`
);
const images = []
const sensil = {
frame: 0
};
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
gsap.to(sensil, {
frame: frameCount -1,
snap: 'frame',
scrollTrigger: {
trigger: '#sensil-product',
pin: true,
pinSpacing: false,
scrub: 0.5,
start: '99.8% 95.33%',
end: '+=482'
},
onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[sensil.frame], 0, 0);
}
});