Jump to content
Search Community

jQuery error

CarlosMav test
Moderator Tag

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

Hi, im using split text, this is my code:
 

var tl = new TimelineLite({delay:0.9}), 
    mySplitText = new SplitText(jQuery('.st1'), {type:"words,chars"}), 
    chars = mySplitText.chars; //an array of all the divs that wrap each character

TweenLite.set(jQuery('.st1'), {perspective:400});
jQuery('.st1').css("opacity","1");
tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, 0.01, allDone);

function allDone(){
  mySplitText.revert();
}

And it is giving me this error:

Uncaught TypeError: Object [object Object] has no method 'getElementsByTagName'

 

on splittext.min.js

 

I know it has to be something silly but i just cant see it.

 

A fresh eyes on the problem could help me.

 

Thank you.

 

Link to comment
Share on other sites

There's no error in what code you've provided there, but I don't think you have an element with class st1 in your document (that error appears when SplitText has a null target). Try this:

var tl = new TimelineLite({delay:0.9}),
    st1 = jQuery('.st1');

if (st1.length > 0) {
    var mySplitText = new SplitText(st1, {type:"words,chars"}), 
        chars = mySplitText.chars; //an array of all the divs that wrap each character

    TweenLite.set(st1, {perspective:400, opacity: 1});
    tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01, allDone);

    function allDone(){
        mySplitText.revert();
    }
} else {
    alert("no .st1");
}
  • Like 3
Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

Mhh hard to say, your code is working fine for me on a local test and in this codepen:

 

See the Pen vdBrw by rhernando (@rhernando) on CodePen

 

A side question for the rest of the GSAP gang, is it just me or parsing the HTML in this sample is taking a humongous load of time (around 7 seconds according to dev tools)?

 

Rodrigo

  • Like 2
Link to comment
Share on other sites

Thank you all, you were right there is not .st1 in the DOM, something is wrong elsewhere in the code, i will check it more thoroughly. I just didnt understand the error, now i know where to look.

 

Merry Christmas to all the community btw.

 

Cheers.

Link to comment
Share on other sites

Ok, at the risk of beign too noob... and this is a JS Question but still,

 

I have a website of 4 pages all with different animations via JS, and i have all my JS on one document (custom.js).

 

The error was thrown on the page that doesnt have the .st1 class, but, why is this code running if there is not a .st1?? i thought JS will run only what is on the current page DOM. 

 

I ask because i have been making this for years on several websites i own and never give me an error until i used SplitText yesterday.

Link to comment
Share on other sites

You are specifically telling SplitText to do something with an object that doesn't exist. 

Trust me, errors like the one you are getting are actually quite helpful. If you rely on code to silently fail chances are its only going to lead to trouble some day.

 

Lets assume an error didn't occur when SplitText was passed a null object.

Well that would mean that the chars array would be empty and then the staggerFrom tween wouldn't work. 

 

So suppose you got to a point where you were wondering why the staggerFrom() tween wasn't working? Well you'd have to investigate why, you'd eventually find that chars had no elements in it and then you'd find out that your SplitText object was bogus. It could be a real headache. 

 

With the error occurring it actually helps save you a lot of trouble.

 

Fortunately, Jamie has provided you code that allows you to check to see if st1 exists before creating the SplitText object. 

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