Marcx Posted February 22 Posted February 22 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="box"></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script> window.addEventListener("load", () => { gsap.to(".box",{ x: 100, duration: 1}); }); </script> </body> </html> I am new on using GSAP and I am just really starting to follow the basics and I have already encountered something weird. Above is my code, and upon initial load, or every reload I always see the animation just starts above halfway through, And what's also weird is if I add any sort of text inside the document, the animation now works perfectly, It starts on its original position. I don't know what is the cause of this problem on this simple example. Can you please help me. I tried placing this code on codepen but the issue doesn't show up on there. It's only on my local browser.
Rodrigo Posted February 22 Posted February 22 Hi @Marcx and welcome to the GSAP Forums! It seems to work as expected here: See the Pen MYWydxJ by GreenSock (@GreenSock) on CodePen. Feel free to fork that demo and make it look/work like your scenario. Hopefully this helps Happy Tweening!
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now