SplitText deprecated in latest gsap?

[anieves 1 Likes (Newbie)]

Hello! I've been playing with GSAP on codepen, specifically with the SplitText plugin. Everything works fine in the codepen, Im using a cdn that i found online. But when I install locally via npm, using the gsap-bonus.tgz, it doesnt find the SplitText plugin

import { SplitText } from 'gsap/SplitText'

Was this plugin deprecated or renamed? Thanks in advance!

 

PS: In the codepen, I'm also trying to achieve the same effect for the split text being used in the following h4 element but on the p tag

<h1 class="animated">hello there im animated</h1>

I've added an overflowY: hidden to the h1 tag. But its not an optimal solution for when there's more than one lines of text. Was wondering if anyone had any insight as to how to achieve this the GSAP way.  <--- Was able to achieve this by adding overflow hidden to inner div elements

 

Thanks in advance!!

 

See the Pen JjrMOWp by agnelnieves (@agnelnieves) on CodePen

Edited December 28, 2021 by anieves
Updated my codepen

[Cassie 3,688 Likes (Superhero)]

Hey there @anieves

 

Nope, that hasn't changed at all. How strange - could you explain the steps you've taken so we can try and figure out what's happening?

[anieves 1 Likes (Newbie)]

Hello @Cassie thanks for the quick reply!! I found the issue, I had installed gsap from npm before, and it was cached. So when I installed later via the .tgz file it was still referencing the one from npm. Now, that's solved but I'm getting another issue 😕 

 

 

I was able to pin it down to the the Scrolltrigger import. So I commented it to validate this issue, but I get another errror:

 

 

Details about my setup:

 

I'm using Nuxt: ^2.15.8

node: v14.17.6

I've wasted a lot of time figuring this out, would appreciate some help 😕

 

Here's the source for my page:
 

<template>
  <main>
    <section class="hero py-0 relative grainy has-animation">
      <div class="hero__container">
        <div class="hero__container__content relative z-10">
          <h1 class="animated">Hero text goes here</h1>
          <a href="#about" class="btn text-center"> button label </a>
        </div>
        <img
          src="/images/hero-woman.png"
          alt="Woman floating wearing a vr headset"
        />
      </div>
    </section>
  </main>
</template>

<script>
import { gsap } from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'

export default {
  name: 'IndexPage',
  async asyncData({ $prismic, params, error, app }) {
    const homepage = (await $prismic.api.getSingle('home')).data
    return {
      home: homepage,
    }
  },
  mounted() {
    this.animateElements()
  },
  methods: {
    animateElements() {
      const animationWrappers = document.querySelectorAll('.has-animation')

      if (animationWrappers.length) {
        // Registering plugins
        gsap.registerPlugin(ScrollTrigger)
        gsap.registerPlugin(SplitText)
        const timelines = []
        animationWrappers.forEach((element) => {
          if (element.id) {
            const tl = gsap.timeline({
              scrollTrigger: {
                toggleActions: 'restart none none reverse',
                trigger: `#${element.id}`,
                start: 'top 85%',
                markers: true,
              },
            })
            const mySplitText = new SplitText(`#${element.id} .animated`, {
              type: 'words,chars,lines',
            })
            const chars = mySplitText.words // an array of all the divs that wrap each character
            tl.to(`#${element.id} .animated`, 0, {
              className: '+=animation-container',
              opacity: 1,
              overflow: 'hidden',
            }).staggerFrom(
              chars,
              1,
              {
                opacity: 1,
                y: 100,
                rotationY: 10,
                rotationX: 10,
                transformOrigin: '0% 50%',
                ease: 'power2.easeOut',
              },
              0.01
            )
            timelines[element.id] = tl
          }
        })
      }
    },
  },
}
</script>

Let me know if this is enough details, if not i can also provide the repo link. Thanks again!!!

Edited December 28, 2021 by anieves
Added details about setup

[OSUblake 18,332 Likes (Superhero)]

You need to transpile gsap in your nuxt.config.

 

 

[anieves 1 Likes (Newbie)]

Thanks @OSUblake this did it!! For future reference in case anyone's experiencing the same issue: https://greensock.com/docs/v3/Installation#npm-club