Jump to content
Search Community

SplitText for beginners

Benjus test

By Benjus
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Benjus test

Benjus

Posted
Posted

Hi,

I've just bought a greensock club subscription (shockingly green).

I'm trying to use the splittext plugin, but I can not make it work. Here is the link of the page I'm working on: Link
I imported the plugin and inserted the splittext code (this is the same as the tutorial on the site).
Can you help me to understand why it does not work?
It's the first time I use these plugins, I'm a beginner

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

First of all, welcome to the club! Thanks so much for joining. 

 

The problem with the page at that link is just that you've got your JavaScript code executing BEFORE the element even exists on the page. Your <script> tag has SplitText("#quote") and then later on you've got <div id="quote">. So when SplitText tries to find that element, the browser hasn't even gotten to it, thus it doesn't exist. 

 

The solution: either move you <script> stuff to the bottom of your <body> tag, or you could wrap your JavaScript in an onload so that it doesn't actually execute until the whole page has finished loading. 

 

Oh, and I also noticed that you're loading TweenMax, CSSPlugin, TweenLite, EasePack, and TimelineLIte but you only need to load TweenMax for all those because it contains TweenLite, CSSPlugin, EasePack, and TimelineLite inside of it already. It's not "wrong" to load the other files - it's just wasteful kb-wise, that's all. Redundant. 

 

Let us know if you need anything else. Happy tweening!

  • Like 3
Link to comment
Share on other sites
Benjus test

Benjus

Posted
  • Author
Posted
5 minutes ago, GreenSock said:

First of all, welcome to the club! Thanks so much for joining. 

 

The problem with the page at that link is just that you've got your JavaScript code executing BEFORE the element even exists on the page. Your <script> tag has SplitText("#quote") and then later on you've got <div id="quote">. So when SplitText tries to find that element, the browser hasn't even gotten to it, thus it doesn't exist. 

 

The solution: either move you <script> stuff to the bottom of your <body> tag, or you could wrap your JavaScript in an onload so that it doesn't actually execute until the whole page has finished loading. 

 

Oh, and I also noticed that you're loading TweenMax, CSSPlugin, TweenLite, EasePack, and TimelineLIte but you only need to load TweenMax for all those because it contains TweenLite, CSSPlugin, EasePack, and TimelineLite inside of it already. It's not "wrong" to load the other files - it's just wasteful kb-wise, that's all. Redundant. 

 

Let us know if you need anything else. Happy tweening!

 

Thank you very much!!!

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...