Jump to content
Search Community

Suggestion: CamelCase

David Spector 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

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

 

Link to comment
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
Link to comment
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
Link to comment
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?

Link to comment
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
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...