Jump to content
GreenSock

marko

Changing Text

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi

 

I'm working on an animated timeline, as it plays there is a div showing month of the year, how do I change the text of that div as it plays

 

ie

.set("#month",{text:"February"},"feb")

doesn't work

 

or how do just go & ask a bit of jquery to do the job?

 

thanks

 

Mark

Link to comment
Share on other sites

Hello marko, and Welcome to the GreenSock Forum!

 

I'm a little confused on what your asking.. if possible can you setup a codepen demo .. this way we can see your code in context.

 

Please go to the following link to learn how to set up a codepen demo, then re-post your example codepen link:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

And read on how to setup a codepen demo so we can better understand whats not working in your code.

 

To create a demo that uses the latest version of TweenMax:

  1. Visit the GreenSock 

    See the Pen nwbIi by GreenSock (@GreenSock) on CodePen

    .
  2. Click the "Fork" button to create your own copy.
  3. Add the minimal amount of HTML, CSS and Javascript necessary to replicate your issue.
  4. Paste the URL of your pen (demo) into a new forum topic with a short description of the problem.
  5. Include OS, browser and device information where applicable. 

As far as using jQuery to change the text you would use the text() method:

 

https://api.jquery.com/text/

// get text on element
​var myText = jQuery("#month").text();

// set text on element
jQuery("#month").text("February");

or using native JavaScript:

// get text of element
var content = element.innerHTML;

// set text of element
element.innerHTML = content;

 you could also use innerText

 

:)

  • Like 1
Link to comment
Share on other sites

Welcome to the GreenSock forums. Two ways I might try this:

 

Callback

tl.call(changeMonth, ["February"]);

function changeMonth(newtext) {
  $("#month").text(newtext)
}

TextPlugin

tl.set("#month",{text:"February"});

TextPlugin is probably the more robust choice, it allows you to rewind/restart your timeline and the text will revert to what it was previously.

  • Like 4
Link to comment
Share on other sites

hi

 

thanks for both getting back so quickly

 

the function works but I can then figure how to get it to trigger off labels

 

I've had a go at a 'code pen' demo

 

http://cdpn.io/kfJqw

 

 

Mark

Link to comment
Share on other sites

hi

 

thats working using the cdn gsap 

 

thanks

 

 

Mark

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