Jump to content
Search Community

Change properties in loop animation

buster808 test
Moderator Tag

Go to solution Solved by buster808,

Recommended Posts

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.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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

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

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

 

 

  • Like 3
  • Thanks 1
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...