Jump to content
Search Community

How to make a wavy/floating animation on multiple elements

mado1 test
Moderator Tag

Recommended Posts

Quick question though,

In your example you use

utils.toArray("circle")

To target 

<circle  cx="50" cy="50"/>

<circle  cx="100" cy="80"/>

etc.

How can I target only circles that have a class or id? for example:
<circle id="circleS" cx="100" cy="80"/>
<circle id="circleS" cx="200" cy="120"/>
<circle  cx="300" cy="50"/>
<circle  cx="300" cy="130"/>
<circle  cx="250" cy="100"/>

 

Never mind, just add #circle to utils.toArray("circle")

  • Like 1
Link to comment
Share on other sites

Hey MADO1,

 

Take a close look at the code: the key is the tweenProperty function, which generates an individual, randomized tween (for all props plus duration and delay) for each target and that in a loop (onComplete: tweenProperty), each time with new ones min / max values.

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