Jump to content
Search Community

Change between SVG fill colors with one button.

bichant test
Moderator Tag

Recommended Posts

Hi,

I'm new at this and confused about the best way to change between several colors with a single button.

 

In my demo I have an SVG rectangle. It starts out transparent. Click the 'Change Color' button and the rectangle turns red. Click the button again and it turns green. Click again and it turns blue.  Or at least that is how it should work.

 

I have gotten it to start out transparent with autoAlpha, and stay at red with .pause(). What I am having trouble figuring out is how and where to insert .play() or .resume() in my code get it to change to the next color. I'm not even sure I am going about this in the right way or if I should use an array or .fromTo().

 

Eventually, there will be more colors, they will fade in and out as the same color or a different color, change opacity, and a few other things.  

 

Thank you for your help in advance!

See the Pen QWwRNya by bichant (@bichant) on CodePen

Link to comment
Share on other sites

There are a bunch of ways you could do this. Here's one idea: 

See the Pen 969c940ecb546350fbc63e6f7c55ca30 by GreenSock (@GreenSock) on CodePen

 

var fills = [
    "rgba(255,0,0,0.5)", 
    "rgba(0,255,0,0.5)",
    "rgba(0,0,255,0.5)"
  ],
  index = -1;

gsap.set("#rect", {autoAlpha:0});

document.getElementById("chng").addEventListener("click", function() {
  index = (index + 1) % fills.length;
  gsap.to("#rect", {
    autoAlpha: 1,
    fill: fills[index],
    overwrite: true,
    duration: 1
  });
});

That way, you can put as many fills into that array as you want, and it's all dynamic. No need to create a bunch of tweens, add pauses in a timeline or anything like that. Nice and simple. 

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

Oh yes that helps! Thank you Jack!!

 

I thought that I needed to use an array but couldn't get it to work. From your code I can see that I was targeting the wrong thing. (The #rect, not the fill.)

 

It looks like I need to learn a lot more about jQuery.

Link to comment
Share on other sites

2 hours ago, bichant said:

Oh yes that helps! Thank you Jack!!

Glad to help

 

2 hours ago, bichant said:

It looks like I need to learn a lot more about jQuery.

I am curious why you thought that. I didn’t use jQuery in the demo at all and you don’t need jQuery at all honesty these days. It is fine if you want to use it though. I just didn’t want to give you the impression that jQuery knowledge is required. 
 

Happy tweening!

Link to comment
Share on other sites

The remainder / modulus operator (%) returns the remainder after (integer) division.

 

https://riptutorial.com/javascript/example/760/remainder---modulus----

 

So that was just a shorter way of doing this:

index = index + 1;
if (index >= fills.length) { // don't let it exceed or equal the length of the Array, otherwise the index won't exist in the Array!
  index = 0;
} else if (index < 0) { // don't let it be less than zero (Arrays don't have negative indexes)
  index = fills.length - 1;
}

Obviously the second part of the if/else statement isn't necessary because we're only ADDING to the index on each click (so it'd never dip below zero) but I'm showing you what the modulus operator would do - it'd also protect if you have a button that decrements the index. 

 

Basically it's a quick/short way of ensuring that the values are always between 0 and array.length - 1. 

 

Does that clear things up? 

Link to comment
Share on other sites

Like I said I am new to this. I've read a lot of posts and watched a few videos about GreenSock over the last couple of weeks. One of the first videos I watched talked about downloading jQuery to use with GreenSock. For some reason I thought about that when I looked at your response this morning.

 

What do you recommend I read up on to get better?

Link to comment
Share on other sites

Hm, what exactly do you want to get better at? Are you just trying to be a better overall JavaScript developer or do you want to get better with GSAP in particular? For GSAP, there are a ton of options. Here are a few:

  1. Hang around these forums and participate as much as you can. See 
  2. This article covers the v2 syntax, but the concepts still totally apply in v3 and it can totally change your animation workflow: https://css-tricks.com/writing-smarter-animation-code/ 
  3. @Carl created an excellent video course (paid, but not expensive): https://courses.snorkl.tv/courses/gsap-3-express?ref=44f484
  4. There are courses, videos, and articles scattered around the web with valuable content. Frontend Masters, Lynda.com, Codrops, etc., etc. 

Good luck with your adventure!

Link to comment
Share on other sites

  • 2 years later...

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