Hi!
I'm having problems with some Vue components in Nuxt and SplitText.
I'll try to explain:
I have a global mixin that detects all [data-animation] elements with the scroll and fire an specific animation.
Some of these elements are components and ha. This works fine when I use opacity, X and Y, scale, etc... but when I use Split Text it doesn't.
I got an hydrate error and the animation doesn't work.
This is the code for the animation:
if (elm.dataset.animation === 'lines-down-up-mask'){
var split = new SplitText(elm, {
type: "lines",
linesClass: 'lineParent'
});
var split_parent = new SplitText(elm.getElementsByClassName('lineParent'), {
type: "lines",
charsClass: 'lineChild'
});
gsap.set(split_parent.lines, {
y: '110%'
});
gsap.to(split_parent.lines, {
scrollTrigger: {
trigger: elm,
scrub: false,
start: 'top bottom',
},
stagger: {
each: 0.1,
ease: 'power1.in',
y: 0,
},
onComplete: function(){
split.revert();
}
});
}
This is one of the components:
<Partners
data-bg-color="white"
data-text-color="black"
data-logo-color="black"
data-scroll-section
:title="partnerList.title"
:partners="partners" />
And inside the component I have this:
<template>
<section class="partners">
<div class="headline headline--4 partners__title"
data-animation="lines-down-up-mask">{{ title }}</div>
<MovingMarquee :images="partners" partner_logos />
</section>
</template>
I hope someone could help me, because I don't know why it happens :(
Thanks