Apply initial load fromTo values vs using css

[Sananes]

Hey guys.

Is there any way to apply the fromTo initial from values before rendering the page? Instead of having to make the CSS show opacity: 0, by default, would be great to apply these effects initially without having to use css for initial render.

For example:

This what I'm doing:

this.$gsap.fromTo('[data-content]', {
  y: -50,
  opacity: 0
}, {
  y: 0,
  opacity: 0
})

However on initial load of the page, the elements show up first, then the animation fromTo applies, causing a very weird experience. A workaround to this is setting the default css to the element to have opacity: 0, translateY(-50) but it's not ideal. Is there any way to apply this functionality without setting the css to intially display like that?

[ivodolenc]

Hi, I guess you mean the FOUC effect.

A workaround to this is setting the default css to the element to have opacity: 0, translateY(-50) but it's not ideal.

This should not be a workaround but a standard animation process (to avoid FOUC or similar effects).

You can try something like this:

Method: gsap.set()

<template>
  <div>
    <h1 data-content>Nuxt GSAP Module</h1>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$gsap.set('[data-content]', {
        y: -50,
        opacity: 0
      })

      this.$gsap.to('[data-content]', {
        y: 0,
        opacity: 1
      })
    }
  }
</script>

but I think the result will be similar because the element you want to animate will be displayed a moment before additional animation scripts are loaded.

[Sananes]

You are flippin awesome, thank you so much my man, it's exactly what I was talking about! :)

[ivodolenc]

Np 👍 Closing this since there's no issues.