Hydrate error in Nuxt component with SplitText

[Superloop]

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

 

[OSUblake]

This sounds more like an a Nuxt issue. GSAP has nothing to do with that. Best bet it to search for that error, and make sure your SplitText code does not get called until after hydration.

https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re