Example of scroll observer doesn't have any css, and i wasn't able to get it to work with my css.
#1030
Replies: 2 comments
-
|
Actually it does get triggered, not sure why i thought it doesn't my bad. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Here's a cleaner code without domReady event, it was unnecessary. Also updated the pen. <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animejs scroll -- Not Working</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body id="scroll-container" class="bg-amber-800">
<script type="module">
import {
animate,
onScroll,
} from "https://cdn.jsdelivr.net/npm/animejs/+esm";
animate(".square", {
x: "15rem",
rotate: "1turn",
duration: 2000,
alternate: true,
ease: "inOutQuad",
autoplay: onScroll({
container: "#scroll-container",
debug: true,
}),
});
</script>
<div class="divide-y-2 decoration-pink-400">
<div class="h-screen flex items-center justify-center">
<p class="text-3xl">scroll down</p>
</div>
<div class="h-screen flex items-center justify-start md:justify-center">
<p class="square m-14 w-8 p-8 bg-amber-200"></p>
</div>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Thanks for reading. I am using tailwindcss here.
Trying to get this example to work https://animejs.com/documentation/scroll/scrollobserver-settings/container
The animation does get triggered, but it get's triggered when page is loaded, rather than when code is revealed.
https://codepen.io/Haiz14/pen/emNQNYX
Beta Was this translation helpful? Give feedback.
All reactions