Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fernandocomet

GSAP 3 Migration problems, Set

Recommended Posts

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

You forgot the # in the target: 

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

 

  • Thanks 1
Link to comment
Share on other sites

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

2 minutes ago, fernandocomet said:

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Ok than you very much,

 

So this will only work at Codepen and Codesandbox I think

Link to comment
Share on other sites

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

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

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

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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.

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