Apply initial load fromTo values vs using css about nuxt-gsap

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