Jump to content
Search Community

error: .animate is not a function

makeshiftpointer8 test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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;

        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

    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!

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...