Jump to content
Search Community

target random DOM elements properly

beau_dev test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm grateful for the incredible help I've received on this forum.

 

I've seen other posts regarding randomization, but they're a bit above my head & seem to address randomization of attrs rather than my objective.

Anyway, apologies if this has been mentioned.

 

I have a great many divs. The example I'm posting below contains 9.

 

I simply wish to render an effect of random fade-ins & fade outs of each DOM element, infinitely, (with different animation durations and delays between them).

(Much in the same way Christmas lights slowly go on and off again seemingly out of sync...). I would hope to randomize animation duration so that they overlap.

 

It's a simple animation to write procedurally, I suppose. I would like, however, to learn how to do it properly in GSAP.

(I've seen on the forum, occasional suggestion to use jquery's each() in different contexts. Unfortunately, jQuery isn't available to me).

 

Again, Opacity is the only attribute that I wish to animate: from 0 to 1 and then back to 0--repeatedly on each element... infinitely.

 

Duration of this animation is what I would like to randomize.

Additionally, (but of lower priority) I would like to randomize the order in which each item animates.

 

I am not interested and a stepwise animation of elements down an Array & then back up again.

{yoyo: true} was useful, on the entire array of staggerFromTo() elements... but I quickly discovered that isn't relevant to my problem.

 

I wish, simply, to randomize the sequence (so, I suppose, the index) of each DOM element to be animated.

Secondarily, I would like to randomize animation duration.

 

Q.: Does cycle() perhaps do this? --I've only seen it address values for attrs...

 

One useful post points to this:

See the Pen YWjARB by osublake (@osublake) on CodePen

 

HOWEVER,  these elements are animating simultaneously with equal duration values.

 

 

I'm very grateful, again, for any assistance.

 

What I learn here is giving me insight into a great deal of what I've tried to learn for years.

 

---

P.S.

 

(I'm doing something in react & cannot use jQuery.)

targeting within react.js is another nut I'll crack once I solve this problem (with your kind help). :)

See the Pen bbbbf9aae4abc17626bb5d9b93e8271e?editors=1111 by beau_dev (@beau_dev) on CodePen

Link to comment
Share on other sites

Hi @beau_dev :)

 

If I understand your question correctly, I think a quick loop through the elements would be an easy way to make it happen without jQuery. Here's a quick example that should be easy to understand.

 

See the Pen WzwzQX by PointC (@PointC) on CodePen

It randomizes the duration and a delay and yoyos the opacity. You could also add each tween to a timeline if you need that kind of control.Hopefully that helps.

 

Happy tweening.

:)

 

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

7 minutes ago, PointC said:

Hi @beau_dev :)

 

If I understand your question correctly, I think a quick loop through the elements would be an easy way to make it happen without jQuery. Here's a quick example that should be easy to understand.

 

See the Pen WzwzQX by PointC (@PointC) on CodePen

It randomizes the duration and a delay and yoyos the opacity. You could also add each tween to a timeline if you need that kind of control.Hopefully that helps.

 

Happy tweening.

:)

 

?

naming my first kid after you.

 

thank you!

  • Like 1
  • Haha 4
Link to comment
Share on other sites

I think PointC's version is fantastic and meets all the goals.

However, this is a fun challenge so I thought I'd just share an alternate approach that adds a touch more randomness and TWICE as many boxes ;)

 

The idea is that there is a function that animates a thing with random duration, delay, and repeatDelay. When the animation finishes it calls that function again and passes in the same thing and animates it again with totally new and random values. 

 

See the Pen WzwzOz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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

Probably not what you'll want to use on this project, but you mentioned Christmas lights so I thought I'd make a little addition to @Carl's 'double the boxes' version. If you wanted to display that bad fluorescent light flicker or maybe lights that were about to short out, you could add a Rough ease to opacity tweens.

 

See the Pen LdZZBp by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

18 hours ago, PointC said:

Probably not what you'll want to use on this project, but you mentioned Christmas lights so I thought I'd make a little addition to @Carl's 'double the boxes' version. If you wanted to display that bad fluorescent light flicker or maybe lights that were about to short out, you could add a Rough ease to opacity tweens.

 

See the Pen LdZZBp by PointC (@PointC) on CodePen

Happy tweening.

:)

 

 

LOL --Great! :) I had a minor seizure... But I love it!

 

This is kind of what I'm interested in doing.

 

 

 Thx so much for the help.

  • Like 2
Link to comment
Share on other sites

On 3/15/2018 at 10:13 PM, PointC said:

Ha. I'm just glad you didn't make more improvements to my flicker version. I really like the changes you made to my first demo, but I was afraid we were getting into some kind of Zoolander style walk-off demo battle. :lol:

 

RW1eCjL.jpg 

 

I want to battle!!!

 

 

Some infinitely repeating random animations...

 

 

Some twinkling stars...

 

 

 

And then my finisher, the chanceRoll....

 

 

On 3/14/2018 at 9:06 PM, beau_dev said:

---

P.S.

 

(I'm doing something in react & cannot use jQuery.)

 

jQuery can be easily replaced in ALL of my demos. The only reason I was using it is because that is what the person asking the question was using.

 

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