Share Posted May 12, 2020 Hi, In the demo, I want to change the text for each time color changes. I used to do this with Set or with an onComplete I´m trying to do it with .add but target is wrong ("target message not found") function changeText(arr) { gsap.to("#message", { text: changeText(messages) }); } var tl = gsap.timeline({ repeat: -1 }); colors.forEach((color) => { tl.to("#message", { xPercent: -50, left: "50%", duration: 0, delay: 0 }) .to("#bg", { backgroundColor: color.dark, duration: 1, delay: 3 }) .to("#message", { color: color.light, duration: 1, delay: 0 }) .add(generateText); }); function generateText() { gsap.to("message", { text: changeText(messages) }); } let counter = 0; function changeText(arr) { console.log("dentro"); counter = counter + 1; return messages[counter].title; } Any help is welcome See the Pen xxwzmmX by fernandocomet (@fernandocomet) on CodePen Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 You forgot the # in the target: function generateText() { gsap.to("#message", { text: changeText(messages) }); } 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 12, 2020 Thanks a lot Zach, I think I need a plugin, it says: "Invalid property" "text" "set to" "Froggyfer" "Missing plugin? gsap.registerPlugin()" I am using these two: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js -> Is this ok? Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 2 minutes ago, fernandocomet said: I am using these two: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js -> Is this ok? No, you need the GSAP 3 version of the TextPlugin: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js We recommend forking the GSAP Starter Pen for CodePen projects and using the GSAP Install Helper for getting the correct files for your actual projects 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 12, 2020 Ok than you very much, So this will only work at Codepen and Codesandbox I think Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 Just now, fernandocomet said: So this will only work at Codepen and Codesandbox I think If you use the CDN links like the Install Helper provides you can use it on any site. Only Club GreenSock plugins are restricted to CodePen (unless you are a Club GreenSock member and download the club files from the GreenSock website). A good way to see what plugins are Club plugins is to look at the GSAP Overview. Link to comment Share on other sites More sharing options...
Author Share Posted May 12, 2020 Ok, so if I use it for React I think I should do: import gsap from "gsap"; import 'gsap/TextPlugin'; Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 Again, we highly recommend using the GSAP Install Helper. If you are using modules (like in React) then you can import GSAP and the TextPlugin like so: import { gsap } from "gsap"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(TextPlugin); 1 1 Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 14 minutes ago, ZachSaucier said: Again, we highly recommend using the GSAP Install Helper. If you are using modules (like in React) then you can import GSAP and the TextPlugin like so: I think the modules should be displayed by default instead of the cdn links. Most questions about installing gsap are about npm. I'm sure most people can figure out the cdn stuff on their own. Link to comment Share on other sites More sharing options...
Share Posted May 12, 2020 11 minutes ago, OSUblake said: I think the modules should be displayed by default instead of the cdn links. Most questions about installing gsap are about npm. I'm sure most people can figure out the cdn stuff on their own. Ya, agreed. I went ahead and switched it. 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