buster808 Posted May 21, 2021 Share Posted May 21, 2021 Hi, This is code from the fabulous https://www.creativecodingclub.com/ I want to be able to change the background colour for each circle also add a separate SVG in each circle. I tried adding id to each circle then using gsap.set with no joy. Thanks for any help. See the Pen rNyjPrw by buster808 (@buster808) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted May 21, 2021 Share Posted May 21, 2021 Glad to see you are enjoying "the fabulous" creative coding club. Not sure how you want to dynamically change the svg artwork but the problem with using an id is that your id is a number. a CSS id can not start with a number or just be a number. try something like circle.setAttribute("id", "circle" + counter++) For changing the colors there are plenty of options. I like stepping through the hsl() hue values to get a nice rainbow effect See the Pen dyvNLpX?editors=1010 by snorkltv (@snorkltv) on CodePen using gsap.utils.wrap() you can also step through a pre-defined array of colors See the Pen ExWZJNY?editors=0010 by snorkltv (@snorkltv) on CodePen You have access to my wrap lesson in creative coding club, but here it is for anyone else who happens to be meandering by So glad to see you are enjoying the lessons and most of all trying stuff on your own! Great job. 5 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 3 hours ago, Carl said: a CSS id can not start with a number or just be a number. Had to go look this up because I've never heard that. In HTML5, a number is technically valid. https://mathiasbynens.be/notes/html5-id-class But it has issues... document.getElementById("0") // ok document.getElementById(0) // ok document.querySelector("#0") // error: not a valid selector 3 Link to comment Share on other sites More sharing options...
buster808 Posted May 21, 2021 Author Share Posted May 21, 2021 Thanks Carl gsap.utils.wrap() perfect. I was able to change text using: const text = ["c", "x", "a", "p"] gsap.set(circle, {textContent:gsap.utils.wrap(text, i)}) But want to add images to the circles like icons. const icons = ["images/icon1.png", "images/icon2.png"", "images/icon3.png"", "images/icon5.png""] Can this be achieved? 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 Assuming you plan on use background-image, just do it the same way. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 If you are using <img> elements, then set src attribute. 1 Link to comment Share on other sites More sharing options...
Carl Posted May 21, 2021 Share Posted May 21, 2021 Hey Blake, interesting findings about IDs with numbers. This article was the first I found when looking and just went with what it said. The main point is that they are invalid as CSS selectors. 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 21, 2021 Author Share Posted May 21, 2021 32 minutes ago, OSUblake said: If you are using <img> elements, then set src attribute. 33 minutes ago, OSUblake said: Assuming you plan on use background-image, just do it the same way. Yes trying background image using below but no cigar. const bimage = ["images/acs.png", "images/pbj.png"] gsap.set(circle, {backgroundImage:gsap.utils.wrap(bimage, i)}) Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 Those aren't valid properties for backgroundImage. https://developer.mozilla.org/en-US/docs/Web/CSS/background-image const bimage = ["url(images/acs.png)", "url(images/pbj.png)"] 2 Link to comment Share on other sites More sharing options...
Solution buster808 Posted May 21, 2021 Author Solution Share Posted May 21, 2021 10 minutes ago, OSUblake said: Those aren't valid properties for backgroundImage. https://developer.mozilla.org/en-US/docs/Web/CSS/background-image const bimage = ["url(images/acs.png)", "url(images/pbj.png)"] Daaaah Thanks 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 22, 2021 Author Share Posted May 22, 2021 14 hours ago, buster808 said: Hi, This is code from the fabulous https://www.creativecodingclub.com/ I want to be able to change the background colour for each circle also add a separate SVG in each circle. I tried adding id to each circle then using gsap.set with no joy. Thanks for any help. Hi, Is their a way to have all the X's aligned horizontal with no rotation. thanks Link to comment Share on other sites More sharing options...
buster808 Posted May 26, 2021 Author Share Posted May 26, 2021 See the Pen ExWZJNY by snorkltv (@snorkltv) on CodePen Hi, How can I set the circles too autoRotate: false like on motion path. Thanks Link to comment Share on other sites More sharing options...
Carl Posted May 26, 2021 Share Posted May 26, 2021 hmmm, did you watch the Ferris Wheel lesson (members only link) in B-sides, bonuses and oddities? It's literally the next lesson after the Circular Distribution one that you are using and It explains how to counter-rotate each element to build a ferris wheel See the Pen RwKOrVb?editors=0010 by snorkltv (@snorkltv) on CodePen the circles demo can be updated to use a negative rotation on each circle See the Pen wvJeVzW by snorkltv (@snorkltv) on CodePen 3 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 26, 2021 Author Share Posted May 26, 2021 Thanks Carl, I missed that but will go through. daaaaahhhhhh 1 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