SplitText deprecated in latest gsap?

[anieves]

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]

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]

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]

You need to transpile gsap in your nuxt.config.

 

 

[anieves]

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

[hello.pam]

On 12/28/2021 at 4:38 PM, anieves said:

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.

Hello @anieves how did you fix this? I am encountering the same problem  

[GreenSock]

Hi @hello.pam. Can you be a little more specific? What error are you getting exactly and did you follow the instructions at https://greensock.com/docs/v3/Installation#npm-club? We'd love to help, but it's tough with such limited information.

 

It doesn't look like you have a Club GreenSock membership, so that is likely the problem. SplitText is only available to Club GreenSock members ("Shockingly Green" and higher). Sign up at https://greensock.com/club 

[hello.pam]

Thank you for your answer. 

Maybe I understood wrong, you are right I am currently not paying in greenstock, but I had understood that by downloading the gsap-member.zip and then installing via npm gsap-bonus.tgz (as stated in this video https://vimeo.com/391314787) the files will be uploaded in the node_modules folder. 

When I run install gsap and install gsap-bonus.tgz this is my log: 

 

Thank you, once again, maybe I got it wrong!

[Cassie]

Hi there!

 

You don't need to run npm install and install the tgz file. Either one is ok.

What is the issue you're having though? Are you wanting to use splitText or just struggling to use the core gsap files?

[hello.pam]

Hello Cassie, 

Thank you for answering.

Here is my log: 

 

The files don't seem to exist 🆘

[GreenSock]

ScrollSmoother and SplitText will ONLY be in the zip download if you have the appropriate Club GreenSock membership. You don't have one yet, so those files will not be in your download. Once you sign up ("Shockingly Green" or higher), you'll get access to those. 

 

In the meantime, you can use the gsap-trial package to just test things out locally on on whitelisted domains like CodeSandbox, CodePen, and Stackblitz. Or use the URLs listed at https://greensock.com/try-plugins.

[hello.pam]

It's all clear now. Thank you :)