jerryB Posted October 29, 2021 Share Posted October 29, 2021 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); } }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 29, 2021 Share Posted October 29, 2021 Hey Jerry. This issue has nothing to do with GSAP. You don't have an element with an ID of sensil-product on your page, which is what your selector is looking for. 1 Link to comment Share on other sites More sharing options...
jerryB Posted October 29, 2021 Author Share Posted October 29, 2021 hmm, that's right; there's nothing on those pages; so not sure why browser thinks there is, since the animation is only on one page Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now