gredesign Posted March 27, 2020 Share Posted March 27, 2020 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 More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 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> 1 Link to comment Share on other sites More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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 More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 Here you go: See the Pen PoqXbdb by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 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 More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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: My JS: Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 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 More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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 More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 2 minutes ago, gredesign said: Would you mind replacing copy with "Printing is awesome with company" Done. 1 1 Link to comment Share on other sites More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 Thank you @PointC ! Link to comment Share on other sites More sharing options...
GreenSock Posted March 27, 2020 Share Posted March 27, 2020 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. 1 Link to comment Share on other sites More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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: But then, once I registered it, I got this error: I can't win. Lol. Link: https://test-type-animations.webflow.io/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 5 minutes ago, gredesign said: https://test-type-animations.webflow.io/ 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> 2 Link to comment Share on other sites More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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: Part that was cut off by UI. After: Anyhow, thanks so much! Eagle eyes. Link to comment Share on other sites More sharing options...
gredesign Posted March 27, 2020 Author Share Posted March 27, 2020 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 More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 Yep, the mismatch of the tags made it not be closed in terms of the DOM so it became nested 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
PointC Posted March 27, 2020 Share Posted March 27, 2020 28 minutes ago, ZachSaucier said: Your script tags are nested (and one is misspelled). That's not good. Good catch Zach. 👓 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now