error: .animate is not a function

[makeshiftpointer8]

I’ve been following this tutorial on Youtube where they’re recreating an image gallery interaction from a portfolio website. I’m a newbie, so I can’t comprehend how a certain function works. But halfway through the tutorial, I stumbled over an Uncaught TypeError.

Uncaught TypeError: gallery.animate is not a function at window.onmousemove

Here’s the javascript file from the video: script.js. Am I doing something wrong?

[Rodrigo]

Hi @makeshiftpointer8 and welcome to the GreenSock forums!

 

Normally we require a minimal demo for solving problems and we tend to not look at JS files that are uploaded but in this case the file was super simple to follow. Here is what you have:

const gallery = document.getElementsByClassName('gallery');

window.onmousemove = (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    const xDecimal = mouseX / window.innerWidth;
    const yDecimal = mouseY / window.innerHeight;

    const maxX = gallery.offsetWidth - window.innerWidth;
    const maxY = gallery.offsetHeight - window.innerHeight;

    const panX = maxX - xDecimal * -1;
    const panY = maxY - yDecimal * -1;

    gallery.animate({
        transform: `translate(${panX}px, ${panY}px)`
    }, {
        duration: 4000,
        fill: 'forwards',
        easing: 'ease'
    })
}

const radius = 300;
const blocks = document.querySelectorAll('.block');
const radius2 = radius * radius;
const container = document.querySelector('.gallery');

blocks.forEach((block) => {
    let b = block.getBoundingClientRect();
    (block.cx = b.left + b.width / 2 + window.pageXOffset),
    (block.cy = b.top + b.height / 2 + window.pageYOffset);

    block.tween = gsap.to(block, {
        scale: maxScale,
        ease: 'power1.in',
        paused: true
    }).progress(1).progress(0);

    document.addEventListener('mousemove', (e) => {
        let i = blocks.length;
        let dx;
        let dy;
        let block;

        while (i--) {
            block = blocks[i];
            dx = (blocks.cx - e.pageX) ** 2;
            dy = (blocks.cy - e.pageY) ** 2;
            block.tween.progress(1 - (dx + dy) / radius2);
        }
    })
});

The issue is that you're creating a variable from the selector but at no point you're adding an animate function to it. That's why you see the error. I don't know what the animate method is but my best guess is that you're replacing a jQuery selector with a regular vanilla selector. I don't have time to follow through the entire tutorial you linked to confirm that, but check if they're using jQuery.

 

If you have more questions let us know and remember to include a minimal demo and keep your questions GSAP-related since there is no GSAP code in your example.

Happy Tweening!