Need Help with a Simple GSAP Animation Not Working on Page Load
Hi there!
I’m just starting out with GSAP, and I’ve created a simple animation to make an element enlarge when the page loads. However, for some reason, it’s not working, and I can’t figure out why. 😅
Does anyone know what I might be doing wrong?
Thanks a lot in advance!
Code:
<!-- Incluye GSAP desde el CDN -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script>
gsap.fromTo(".404_sticker",
{ scale: 0, opacity: 0 }, // Estado inicial (chiquito y transparente)
{
scale: 1,
opacity: 1,
duration: 1.5,
ease: "bounce.out", // Efecto de rebote
}
);
</script>
test link: https://sherpa-2024.webflow.io/gsap-test3 Replies
@Ander I think you accidentally put a "." in your classname in webflow. You have a console error that the classname
.404_sticker is not valid. You'll notice in the DOM, I think webflow added a _ in front instead of the .
So just make sure the classname in webflow is 404_sticker (no period in front)
Thank you very much, Keegan!
It’s very strange, I deleted the class, created a new one carefully, and it kept giving me the error that it wasn’t a valid selector. I ended up changing it to an ID, and it works fine. It works for me either way!
Thank you very much for your wisdom!!!