[General Guidelines on units(px,rem,vh,vw)]

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

[General Guidelines on units(px,rem,vh,vw)]

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