Jump to content
Search Community

TextPlugin and superscript

retropunk test
Moderator Tag

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

Hey guys, so I ran into my first 'pure js' issue


I am creating my dynamic text areas and styling them with GSAP...it's awesome.

When I need to start styling things differently within that div things get tricky.

I had a similar problem in AS3 and I built a font styling injection class to deal with sup/sub bold etc.


Anyways, this example I have "works", I just wanted to get an opinion and see if there is a better way. :)



- Patrick

See the Pen XbJGoV?editors=001 by SnapToPixels (@SnapToPixels) on CodePen

  • Like 1
Link to comment
Share on other sites

no, I just don't like my solution...

I was hoping to make it a bit more modular.


I'm being a bit of a baby but I am trying to make some code modules that use only GSAP to style the CSS

I might be hitting a wall which so I wanted to see if anyone else cared to check it out too.



Link to comment
Share on other sites



I've been working on some GSAP based classes, but they go well beyond styling. I modeled them after some HTML5 canvas libraries, so you can do stuff like create, style, position, animate, etc elements from the same class. Are you looking to do something like that?

Link to comment
Share on other sites

ultimately yes. I am currently working on a JS project and I found myself rewriting things for future re use.

I am very much still learning JS and how to write better re usable code.


When I wrote this snippet I realized special characters show up all the time especially with super/sub script and more!


I am on a mission to make it easier! :)

Link to comment
Share on other sites

I know what you mean. Ever since I discovered GSAP, I've been messing around with different ways to replace jQuery with a custom solution. Let me simplify some of the code I've been working on, and I'll post here later.


Some quick questions...

Are you only using the text plugin to change the text, or are you animating it too?


And is there a reason you didn't use var in your demo when creating your variables? Just wondering if you knew the way you did it is creating global variables, which can be bad.

  • Like 1
Link to comment
Share on other sites

That snippet is from a much larger block of code, I didn't even realize that the vars weren't there.

We totally use the TextPlugin to animate too, we use several plugins...I love it.


I just read an article on ES6 this morning...that can't come soon enough!


Do you share on Github? I'd be interested in seeing what you are doing, perhaps contributing where I can.



- Patrick

  • Like 1
Link to comment
Share on other sites

It's funny that you brought up ES6, because that is what my demo uses. No need to wait around for the browsers to catch up, you can start using most of the features today.
Like I mentioned a couple of days ago, I'm a huge fan of TypeScript, which is basically ActionScript with a little ES6 and C# thrown in. Traceur is another compiler worth checking out. Believe it or not, but they are already started to test out ES7 features. And Babel.io is a compiler that is starting to become pretty popular, although I haven't tested it out yet.
I don't share on GitHub… and not because I don't want to, or I'm against it, I just haven't gotten around to it. I have a lot of stuff that I want to put out there and share, but I keep getting sidetracked with other projects.
I adapted your demo to use some DOM based classes I've been working on. It starts out with a base Actor class, which you can easily extend to create more complicated classes like a stage, scene manager, and even extend GSAP classes like Draggable.
I only made a stage,  text, and button class for this demo, but you can see how easy they are to create once you have the base class in place.
To start using an actor, just new one up. You can pass in some DOM/GSAP related properties here, like where to append the actor, the element's id, the element's tag, and some styling properies. There is also a style property that you can use to pass in styles that might not be a property of the class. If you define the same property in the style and config object, it will use the config's values. In the following code, the background color will be green….

// The background will be green
var actor = new Actor({
  background: "green",
  style: { background: "red" }

The reason for this is because those properties are actually getters/setters. If you want to create additional getters/setters, pass in a list of names to the styleProps property.

// Define and set during instantiation
var actor = new Actor({
  scaleX: 1.2,
  styleProps: "scaleX,scaleY"

// Define and set later on
var actor = new Actor()
  .createStyleProps("scaleX", "scaleY");	

actor.scaleX = 1.2;

Configuring an actor should be pretty straightforward.

var actor = new Actor()
  .addChildren(child1, child2)
  .set({ opacity: 0.5, zIndex: 30 })
  .set("padding", 6)
  .setPosition(200, 100)
  .setSize(50, 100);

I didn't focus too much on this animation in this demo, but it's in there. All actors have a timeline that you can use just like a normal GSAP timeline.

var actor = new Actor()
  .set({ width: 50, height: 30 })
  .to(1, { width: 500, height: 300 }, "start")
  .to(1, { x: 200, y: 100 }, "start+=0.25");


See the Pen zGGpoa?editors=001 by osublake (@osublake) on CodePen


  • Like 1
Link to comment
Share on other sites

WOW! This looks excellent!

I have only heard of Babel and Traceur but just haven't had time to investigate. I always wondered what the Traceur option was for in CodePen :)


Thanks a lot for sharing this. Perfect timing for the weekend to do some code play.

I really appreciate you taking the time to share. This really looks like something I could work with. Quite readable...

Very cool


I hear so much about Typescript too. In fact, there is a thread on the Flash Pro PreRelease forum about Typescript and the Flash Pro IDE.

Someone even included a Typescript definition for the WebGL runtime API in Flash Pro! Wild!

It's hard to keep up with all this stuff!


Thanks again.

I'll be in touch soon

- Patrick

  • 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.
  • Create New...