Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anieves

SplitText deprecated in latest gsap?

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

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?

  • Like 1
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

  • Solution

You need to transpile gsap in your nuxt.config.

 

 

  • Like 2
  • Thanks 1
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.
×