fupuchu Posted March 1, 2021 Share Posted March 1, 2021 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); Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 Hey fupuchu and welcome to the GreenSock forums. A few notes: Avoid animating non-performant properties like bottom. Instead stick to performant properties like GSAP's y property which uses transforms Since your two tweens are affecting the same targets with the same duration and ease at the same time it probably makes sense to use a single tween for them both. You might learn a lot from my article about animating efficiently. As for your question, there's not magic unit that fixes it on all screen sizes for all effects. A lot of the difficulty about web code is making sure that things work well across different devices and screens. There are a lot of different techniques to resize things across different size screens. In this case it might make sense to use a functional value for whatever property you need to change on different screen sizes. Then set invalidateOnRefresh: true in your ScrollTrigger's vars so that the tween is refreshed after resizes. In other circumstances maybe it'd make sense to kill off the timeline and ScrollTrigger and rebuild it (especially if you need to remove or add tweens depending on the screen size). 2 Link to comment Share on other sites More sharing options...
fupuchu Posted March 2, 2021 Author Share Posted March 2, 2021 Thank you so much for the resources! I'll look into them and apply the recommended practices! Link to comment Share on other sites More sharing options...
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