[Cannot read properties of null (reading 'getContext')]

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

[Cannot read properties of null (reading 'getContext')]

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

});

[Enqueue GSAP into WordPress theme]

Ah, thanks, that looks closer; I'll play with that config

[Enqueue GSAP into WordPress theme]

Thanks, yeah, I did see those, but they are using the CDN--I can get that to work--but I need to enqueue to the local file. Was hoping to find an example of that from a user. Thanks

[Enqueue GSAP into WordPress theme]

Hi,

I downloaded the member source files and have them in my theme's directory; I'm trying to enqueue to GSAP and ScrollTrigger, but not sure of the exact coding or which files in the folder I need to connect to; this is what I have, but it's not working ... thanks

<?php
function add_gsap_scripts() {

    wp_enqueue_script ( 'gsap-js' , get_stylesheet_directory_uri() . '/lib/gsap/minified/gsap.min.js', array( 'jquery' ), '1', true );
    wp_enqueue_style ( 'gsap-ScrollTrigger' , get_stylesheet_directory_uri() . '/lib/gsap/minified/ScrollTrigger.min.js', '', '1', 'all' );

    wp_enqueue_script( 'gsap-custom', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_gsap_scripts' );
?>

[pinSpacing div]

ah! doh! ... thanks 😃

[pinSpacing div]

well from the demo above; this space between the pinned animation and the image below, which in the design is just a small margin

[pinSpacing div]

thanks ... the codepen isn't exactly what's happening on the wp page; but it is that space, after the animation completes, between it and the next image, that I'm trying to reduce

[pinSpacing div]

I've got an animated element pinned to the viewport but scrolling leaves a space equal to the end point below; or is I turn pin spacing off, I get an awkward wiping effect I don't want v... is there a way to pin an element but remove that extra spacing? I saw other questions around this same issue, though couldn't find a solution given thanks

See the Pen xxrEyxg by jerryklunk (@jerryklunk) on CodePen

[scrollTrigger in wordpress]

yes, thanks, that was the goal, to convert it ... I took a whack, and it's to the point where I can use it, I think thanks

See the Pen xxrEyxg by jerryklunk (@jerryklunk) on CodePen

[scrollTrigger in wordpress]

thanks, here's a demo this is pretty much what happen in wordpress, content just scrolls thru and the animation container site there

[scrollTrigger in wordpress]

I have a clamshell like product that we have created an animation with 36 images like the intro on https://www.apple.com/macbook-pro-16/ ... I was able to use the info in tutorials to build and it works; until I put it in a WP page, then all the content below it scrolls right over (or under) before the animation finishes, and then the last image sits there because the canvas is set to position:fixed; I found the below string, but didn't see example of this animation where the animation, when done, scrolls off the page as the rest of the content comes ... I thought maybe doing it with GSAP/ScrollTrigger would be better, but I couldn't find any direct comparisons; help! 😃