Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
buster808

Change properties in loop animation

Go to solution Solved by buster808,

Recommended Posts

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 post
Share on other sites

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 post
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 post
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 post
Share on other sites

Assuming you plan on use background-image, just do it the same way.

 

  • Like 1
Link to post
Share on other sites

If you are using <img> elements, then set src attribute.

  • Like 1
Link to post
Share on other sites

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.

  • Like 1
Link to post
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 post
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 post
Share on other sites

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 post
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 post
Share on other sites

Thanks Carl, I missed that but will go through. daaaaahhhhhh

  • Like 1
Link to post
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.

×