Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
David Spector

Suggestion: CamelCase

Recommended Posts

I believe that GSAP properties require manual translation from CSS naming format to CamelCase. Here is a function to do that transformation automatically. I suggest you add it to GSAP.


 

// Kebab/snake-case to CamelCase

function SnakeToCamelCase(Str)
    {
    return Str.replace(/-([a-z])/g, function (g)
        {
        return g[1].toUpperCase();
        });
    } // SnakeToCamelCase

 

Share this post


Link to post
Share on other sites

Not sure what the point of that would be. You can use snake case, just make sure it's a string. These do the same thing.

 

TweenMax.to(element, 1, {
  marginLeft: 100
});

TweenMax.to(element, 1, {
  "margin-left": 100
});

 

 

  • Like 4

Share this post


Link to post
Share on other sites

I guess I misunderstood the GSAP vars section of tutorial https://zellwk.com/blog/gsap. I thought it meant that we couldn't use {"background-color":"green"} in GSAP. So you can? Good. Never mind. (Can you use an id string where GSAP wants an element node?)

Share this post


Link to post
Share on other sites
20 minutes ago, David Spector said:

I guess I misunderstood the GSAP vars section of tutorial https://zellwk.com/blog/gsap. I thought it meant that we couldn't use {"background-color":"green"} in GSAP.

 

I have no idea who wrote that, but I'm guessing they thought that because it's hard to find a demo that uses snake case. The only time you HAVE to use snake case is for stuff like CSS variables.

 

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

 

 

28 minutes ago, David Spector said:

(Can you use an id string where GSAP wants an element node?)

 

Yep. You can use any selector that will work with .querySelectorAll() e.g. IDs, classes, tag names, attributes.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

 

TweenMax.to("#foo", 1, {
  x: 100
});

TweenMax.to(".bar", 1, {
  y: 100
});

TweenMax.to("div", 1, {
  scale: 0.5
});

 

 

  • Like 3

Share this post


Link to post
Share on other sites
5 minutes ago, OSUblake said:

The only time you HAVE to use snake case is for stuff like CSS variables.

 

I just realized that's a bad example because the person who made that demo named the CSS variable --myColor. Regardless, CSS variables have to be inside a string because of the -- prefix, and have to match the exact casing used in your CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

 

  • Like 2

Share this post


Link to post
Share on other sites

This tutorial was recommended by the GSAP website, so you must have known who wrote it sometime in the past. Also, that page does not include the string "myColor".

 

I am not talking about selectors. I said clearly that I was talking about CSS properties and I mentioned the property 'background-color', which is not a selector. Please read my postings again. Thank you. I do not know if GSAP requires 'backgroundColor' or not. But if it does, it should not. And if GSAP requires an element node for animation, there is no reason it cannot accept an 'id' value or even a classname preceded by a period (even though GSAP does not require the use of jQuery). I am only saying that GSAP should be flexible. Is that so wrong?

Share this post


Link to post
Share on other sites
1 hour ago, David Spector said:

This tutorial was recommended by the GSAP website, so you must have known who wrote it sometime in the past.

 

I personally do not know who recommended that site, but it's still a good tutorial. 

 

1 hour ago, David Spector said:

Also, that page does not include the string "myColor".

 

What page? I was talking about the demo I posted. You can name a CSS variable whatever you want as long as it is prefixed with a --. Whoever made that demo decided to name it --myColor. I would have named it --my-color, but we're getting off topic here. I was only trying to show an edge case.

 

1 hour ago, David Spector said:

I am not talking about selectors. I said clearly that I was talking about CSS properties and I mentioned the property 'background-color', which is not a selector. Please read my postings again. Thank you. I do not know if GSAP requires 'backgroundColor' or not. But if it does, it should not.

 

I never said "background-color" was a selector, or had anything to do with a selector. I don't know why "background-color" isn't working. Most snake cased names should work. I tested "background-color" in the next version of GSAP, and it works. Regardless, it is a best practice to use camel cased names, so use backgroundColor. 

 

 

1 hour ago, David Spector said:

And if GSAP requires an element node for animation, there is no reason it cannot accept an 'id' value or even a classname preceded by a period (even though GSAP does not require the use of jQuery). I am only saying that GSAP should be flexible. Is that so wrong?

 

You do not need to pass in an actual element. I posted code that clearly answers this.

 

TweenMax.to("#foo", 1, {
  x: 100
});

TweenMax.to(".bar", 1, {
  y: 100
});

TweenMax.to("div", 1, {
  scale: 0.5
});

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Thank you for the clear answer.  My worries were for nothing. I simply misunderstood the tutorial. Shall I delete this posting?

Share this post


Link to post
Share on other sites

No, just leave it. Someone else might have the same question as you in the future.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×