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);