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

[fupuchu]

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

[ZachSaucier]

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

[fupuchu]

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