Jump to content
Search Community

SplitText deprecated in latest gsap?

anieves test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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 by anieves
Updated my codepen
Link to comment
Share on other sites

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 😕 

 

image.thumb.png.9b56565c45b5309f778f05fa769f42ac.png

 

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:

 

image.thumb.png.7f18feec3ba2697fc5386118877f032e.png

 

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 by anieves
Added details about setup
Link to comment
Share on other sites

  • 1 year later...

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 

Link to comment
Share on other sites

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: 

image.png.c07bcd4b278bf7fa98aa9a6066f3478e.png

 

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

Link to comment
Share on other sites

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.

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.
×
×
  • Create New...