bichant Posted February 1, 2020 Share Posted February 1, 2020 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 More sharing options...
GreenSock Posted February 2, 2020 Share Posted February 2, 2020 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? 3 Link to comment Share on other sites More sharing options...
bichant Posted February 2, 2020 Author Share Posted February 2, 2020 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 More sharing options...
GreenSock Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
bichant Posted February 2, 2020 Author Share Posted February 2, 2020 One question about your code. What is % used for in 15 hours ago, GreenSock said: index = (index + 1) % fills.length; Link to comment Share on other sites More sharing options...
GreenSock Posted February 2, 2020 Share Posted February 2, 2020 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 More sharing options...
bichant Posted February 2, 2020 Author Share Posted February 2, 2020 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 More sharing options...
GreenSock Posted February 2, 2020 Share Posted February 2, 2020 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: Hang around these forums and participate as much as you can. See 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/ @Carl created an excellent video course (paid, but not expensive): https://courses.snorkl.tv/courses/gsap-3-express?ref=44f484 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 More sharing options...
bichant Posted February 2, 2020 Author Share Posted February 2, 2020 Yea, that makes sense. Thank you for your patience. Link to comment Share on other sites More sharing options...
bichant Posted February 2, 2020 Author Share Posted February 2, 2020 I would like to get better at GreenSock. At the same time, I'm not very good at javascript so I need to work on getting better at that also. Thank you for the resources and all of your help. Link to comment Share on other sites More sharing options...
codeWorld Posted September 27, 2022 Share Posted September 27, 2022 Old topic, but would like to add you can simply use CSS like below change color svg path{ fill:red } You can also other ways here: https://qawithexperts.com/article/html/how-to-change-color-of-svg-various-ways-using-css/414 Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now