jerryB

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

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

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

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

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' ); ?>

ah! doh! ... thanks ?

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

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

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

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 https://codepen.io/jerryklunk/pen/xxrEyxg

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

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! ?