Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Marc Taule

Hydrate error in Nuxt component with SplitText

Recommended Posts

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

 

Captura de Pantalla 2021-08-04 a les 9.43.58.png

Link to comment
Share on other sites

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

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×