GSAP 3 Migration problems, Set

[fernandocomet 1 Likes (Newbie)]

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

[ZachSaucier 6,945 Likes (Superhero)]

You forgot the # in the target: 

function generateText() {
  gsap.to("#message", { text: changeText(messages) });
}

 

[fernandocomet 1 Likes (Newbie)]

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?

[ZachSaucier 6,945 Likes (Superhero)]

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  

[fernandocomet 1 Likes (Newbie)]

Ok than you very much,

 

So this will only work at Codepen and Codesandbox I think

[ZachSaucier 6,945 Likes (Superhero)]

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.

[fernandocomet 1 Likes (Newbie)]

Ok, so if I use it for React I think I should do:

 

import gsap from "gsap";

import 'gsap/TextPlugin';

[ZachSaucier 6,945 Likes (Superhero)]

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);

 

[OSUblake 16,450 Likes (Superhero)]

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.

 

 

[ZachSaucier 6,945 Likes (Superhero)]

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.