Closed Sananes closed 2 years ago
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:
<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.
You are flippin awesome, thank you so much my man, it's exactly what I was talking about! :)
Np 👍 Closing this since there's no issues.
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:
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 haveopacity: 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?