fupuchu

Thank you so much for the resources! I'll look into them and apply the recommended practices!

Hey all! New GSAP user here. Was wondering about the general practice of using units to do some basic animation. However on different screen sizes, I can't seem to lockdown on a specific value for all screen sizes. On smaller screen size, it's not "high" enough, and on bigger screen size, it's too "low". What's the recommended way of approaching a scenario such as this? HTML: <div class="wrapper"> <div class="animation-container"> <div class="animation-two"> <img src="images/this-is-animated.png" /> </div> <div class="static-image"> <img src="images/this-is-static.png" /> </div> </div> </div> CSS: .animation-container { display: flex; justify-content: center; align-items: center; } .animation-two { position: absolute; bottom: 400px; opacity: 0; } JS: gsap .timeline({ scrollTrigger: { trigger: "#triggerAnimOne", start: "center center", end: "bottom top", scrub: true, pin: false, }, }) .to(".animation-two", { bottom: 570 }) .to(".animation-two", { opacity: 1 }, 0);