Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nothing happens #961

Open
rvneXe opened this issue Jan 28, 2025 · 5 comments
Open

nothing happens #961

rvneXe opened this issue Jan 28, 2025 · 5 comments

Comments

@rvneXe
Copy link

rvneXe commented Jan 28, 2025 •
edited
Loading

Hi. I'm absolutely a starter, please be kind.

I know this sounds dumb, but this isn't working for me.
I installed it using npm, imported it in my html, and made a example animation, but it doesn't play.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <script src="../node_modules/animejs/lib/anime.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            anime({
                targets: '.circle',
                translateX: 250
            })
        }
    </script>
</head>

<body>
    <div class="circle"></div>
</body>

</html>
.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red;
}

It doesn't play at all when I reload the page or whatsoever. No console messages or errors at all. Tried with and without window.onload, tried var = animation ... animation.play()
@different55
Copy link

In the console, if you type in anime and hit enter, does it return undefined or does it return a successfully-loaded animejs?

@rvneXe
Copy link
Author

rvneXe commented Jan 30, 2025

it does. yea. Image

@different55
Copy link

Extra weird. It's working for me when I copy and paste your exact code into CodePen.

Does your circle just spawn into existence with style="transform: translateX(250px);" or is it hanging out in the top left corner of the page? What happens if you just run anime({targets: '.circle', translateX: 250}); in the console after page load?

@rvneXe
Copy link
Author

rvneXe commented Jan 31, 2025

It was on the top left corner, yea.
By running your command, it did move, yes!

@different55
Copy link

Out of curiosity, what happens if you move the <script> block to be just before the closing tag?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@different55 @rvneXe