Jump to content
Search Community

TextPlugin Issue - Invalid Value

gredesign test
Moderator Tag

Recommended Posts

Im getting this error:

 

invalid text tween value: [object Object]

 

Not sure why. I thoroughly checked everything and unless I'm still missing something, this is a complete mystery.

 

Here is the link:

https://test-type-animations.webflow.io/

 

I'm working in Webflow, so didn't include a Codepen link. Here is the code I'm implementing before </body> tag:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/plugins/TextPlugin.min.js"></script>

 

<script>
TweenMax.to(".myth", 1, {text:{value:"Reality", padSpace:true}});

</script>

 

Link to comment
Share on other sites

Hey gredesign and welcome. 

 

Why not use GSAP 3? It has a smaller file size, a bunch of new features, and a sleeker API. The GSAP version you're using is really old. 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script>

<script>
gsap.to(".myth", {duration: 1, text:{value:"Reality", padSpace:true}});
</script>

 

  • Like 1
Link to comment
Share on other sites

Honestly, I have never used GSAP 3. I'm so comfortable with this old version and know my way around it for the most part. I've been hesitant to jump on anything new that might require a learning curb. But I understand though, I need to keep up. Lol.

Link to comment
Share on other sites

Just now, gredesign said:

Honestly, I have never used GSAP 3. I'm so comfortable with this old version and know my way around it for the most part. I've been hesitant to jump on anything new that might require a learning curb. But I understand though, I need to keep up. Lol.

It should be pretty straightfoward to convert things to GSAP 3. The old syntax is still valid for the most part (though we recommend using the newer syntax). I updated my post above to use it.

 

Glad to hear you're comfortable using GSAP though!

Link to comment
Share on other sites

Thank you Zach,

I'll move forward and start using the new syntax. I am still confused though about why my code wasn't working. I was targeting an h1 tag with the class name of "myth". Then I converted its textual content to "Reality". How was the text value invalid?

 

My DOM:

image.png.847276114e5291a157d82106601111dc.png

 

My JS:

image.png.4b7385c827cb40b3fed9df990642bcd9.png

Link to comment
Share on other sites

1 minute ago, gredesign said:

I'll move forward and start using the new syntax. I am still confused though about why my code wasn't working. I was targeting an h1 tag with the class name of "myth". Then I converted its textual content to "Reality". How was the text value invalid?

I don't know :) I'm not familiar enough with GSAP 2 to say. Maybe it is a bug of some sort? @GreenSock or one of the people who have been around longer will have to comment.

Link to comment
Share on other sites

Ok. Thanks Zach. I'll see if anyone has insights, but even if not, that is okay because I'll be using the most up-to-date version now. One more thing… I meant to not put the company name in the example. Would you mind replacing copy with "Printing is awesome with company", since the Codepen post will be public? Thanks much and sorry about that.

Link to comment
Share on other sites

I think you'll be much happier with the updated, modern GSAP.

 

As for why your old code wasn't working, it's acting like TextPlugin wasn't loaded/initialized properly although I see in your source that you're loading it. I wonder if there's something else in the source that's messing up the scope somehow, like if you've got another GSAP loading with Webflow. It's tough to troubleshoot a live site like that. Let us know if you still need some help. 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

I don't have any other loaded. Its a fresh build.

 

I just tried to implement the code, but still getting the same error. Here is what I have put:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script>

<script>
gsap.registerPlugin(TextPlugin);
TweenMax.to(".myth", 1, {text:{value:"Reality", padSpace:true}});
</script>

 

I did the registerPlugin part because I kept getting this error:

image.thumb.png.79b262f5b5f8366d9440800e7c84cfe9.png

 

But then, once I registered it, I got this error:

image.png.ff5509b6ab547a10ab969e02562694a1.png

 

I can't win. Lol.

 

Link:

https://test-type-animations.webflow.io/

 

 

Link to comment
Share on other sites

5 minutes ago, gredesign said:

Your script tags are nested (and one is misspelled). That's not good.

 

What you have:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<scipt src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js">
  <script>
  //gsap.registerPlugin(TextPlugin);
  TweenMax.to(".myth", 1, {text:{value:"Reality", padSpace:true}});
  </script>
</scipt>

What it should be:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script>
<script>
  gsap.registerPlugin(TextPlugin);
  gsap.to(".myth", {duration: 1, text: {value: "Reality", padSpace: true}});
</script>

 

  • Like 2
Link to comment
Share on other sites

Oh, crazy. I see. So on my end, I didn't have nested script tags, but I did mis-spell "script" as "scipt". I think this cause the outputted code to nest one script inside of another.

 

Before:

image.thumb.png.d1f6514ddbc7e1236542946764eec4f2.png

Part that was cut off by UI.

image.png.75b7167c3e65c32300c6b5ee5eb18a33.png

 

After:

image.thumb.png.96a257562a1f1bf67924aa3f5ebf658c.png

 

Anyhow, thanks so much! Eagle eyes.

Link to comment
Share on other sites

Hey, one more question. Is it possible to use a fromTo with the textPlugin? For example, could I do the same animation above, but the letter fade from 0 to 1. I tried, but it faded the entire word in, but not each letter sequentially.

Link to comment
Share on other sites

1 minute ago, gredesign said:

Is it possible to use a fromTo with the textPlugin? For example, could I do the same animation above, but the letter fade from 0 to 1. I tried, but it faded the entire word in, but not each letter sequentially.

That's a job for SplitText :) The text plugin is just for switching out text values.

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