Search code examples
javascriptjquerygsap

Text not changing with Greensock Text Plugin


I'm trying to use the Greensock text plugin. I can change the color of text, but I cannot change the text. I'm using jQuery 3.2.1 and Greensock TweenMax 1.20.3

My code will change the text color to white, but the text will remain as Test. I'm not getting any console errors either.

var myElement = $("#scramble");

TweenLite.to(myElement, 2, {
  text: "This is the new text",
  color: "#FFFFFF",
  ease: Linear.easeNone,
  paused: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="scramble">Test</div>


Solution

  • You Need to add the Greensock TweenMax Text plugin.

    var myElement = $("#scramble");
    
    TweenLite.to(myElement, 2, {
      text: "This is the new text",
      color: "red",
      ease: Linear.easeNone,
      paused: false
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js"></script>
    <div id="scramble">Test</div>