Constant randomization of div elements

[ladlon]

Hi.  Just wanted to verify something...

 

As I can see, the core of GSAP is 'A -->B' tweens... and that has been working for me superb.

 

If I wanted to have one property costanty changing (random number applied at regular intervals WITHIN the tween), as opposed to transitioning from the start of the tween to the end, would I do that via regular Javascript outside of the tween, or is there some GSAP means to do this sort of thing?

 

As a simplified example, if I have a graphic block do a positional tween across the screen (A->B), but want the size to undulate at (say) 4 times a second as it travels, how would I go about doing that?

 

NOTE: The application of the random value can happen continually, even before/after (independent of) the tween... as (in my real world case) the items will be always tweening, so the random values wouldn't have to stop/start during the actual tween.  They could be constant, even if/when the items are offscreen or whatever.   The way I see it, I'd just have some constantly running line of code that continually plugs in a random value to whatever property I'm after, and have that set to some particular interval?

 

I've created a codepen demo, although here it serves only for if someone wants to add the answer to the code or something.  The tween here is just an example, and not specific to the issue, really.

 

Sorry, I couldn't add a Run button this time.  The option in the Behavior setting seems to have vanished.  Did they move it or something?

 

 

See the Pen abdbvNq by ladlon (@ladlon) on CodePen

[ZachSaucier]

15 minutes ago, ladlon said:

If I wanted to have one property costanty changing (random number applied at regular intervals WITHIN the tween), as opposed to transitioning from the start of the tween to the end, would I do that via regular Javascript outside of the tween, or is there some GSAP means to do this sort of thing?

Depends on what you're wanting to do. You can either set a tween to repeat outside of your other timelines (like gsap.to(elem, {...})) or you could use GSAP's ticker if you need to do something every tick.

 

In your demo I'd just use a second tween:

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

 

17 minutes ago, ladlon said:

Sorry, I couldn't add a Run button this time.  The option in the Behavior setting seems to have vanished.  Did they move it or something?

It's a setting. If you click on "Settings" then navigate to "Behavior" you can enable it. We cover that in the thread where we talk about making demos:

 

[ladlon]

Hi, Zachsaucier.  Thanks for the info.

 

Ya, I've done the Run thing before... but today I can't seem to find the setting in the Behavior section.  Maybe I'm just losing my mind.  There's three options, but none were the autoplay type one.

 

(I give it a 80% chance that I'll check it now, and suddenly find it right there...  Seriously, I didn't see it at all, after searching for it today!)

 

 

UPDATE: Okay, I'm a moron... sorry.  It IS there (as everyone would expect)....  Just for some reason today, I misinterpreted it.   Wow... that was dumb of me...  but no fires set, so I'll get over the shame soon enough.  Sorry about that!

[ladlon]

Quick followup question...

 

The 'do another tween (with a short duration and an infinite repeat, I assume?) seems obvious enough, but somehow (rookie mistake) I assumed that if I do two tweens that use the same target item, it will do them sequentially.... But then, upon reflection(...!), I realize that with that logic, putting a tween with an infinite repeat in front of another tween that used the same target item would (theoretically) mean that the second tween would never run!

 

So... I guess there's no real followup question, as I just proved the invalidity of my logic!

 

Okay, sorry.. still learning the finer details here!  Thanks!

[ZachSaucier]

13 minutes ago, ladlon said:

putting a tween with an infinite repeat in front of another tween that used the same target item would (theoretically) mean that the second tween would never run!

If you had both tweens added to the same timeline you'd be correct. But if they're separate, then they're separate.

[ladlon]

Ah!....  Yes, that totally makes sense!  Thanks!

[PointC]

I'd just like to point out with the use of the position parameter you can have both tweens on the timeline start at the same time. So, in the case of Zach's fork of your demo, you'd do that like this:

gsap.timeline()
  .to(".item", { x: 200, duration: 5, repeat: -1 })
  .to(".item", { y: 100, duration: 0.25, repeat: -1, yoyo: true, ease: "sine.inOut" }, 0);

Additionally, if you didn't have the position parameter on the second tween, it would still run after the first iteration of the infinitely repeating first tween.

 

Happy tweening.

 

[PointC]

PS More info about the position parameter.

 

 

[ladlon]

Hello again, PointC...  Yep, I haven't utilized a timeline yet... but certainly will when the need arises!

 

For some reason, it never occurred to me to simply do a second tween (targetting the same item) with a shorter duration, and infinte repeat, to do a rapid change during a slower tween.

 

I think probably the reason I never considered it, is because intially, I wanted a RANDOM value each 'tick', as opposed to a rapid A to B repeat.  But then I got a little sidetracked/confused when I was previously asking about utilization of random() within a tween, as I seemed to be getting random results (as far as whether it seemed to WORK or not!)... but was then told that tween properties can't be affected by random(), only the item properties (....if I understand right)... but then was also shown how using a randomizer function to be called on would address that (...It may have been you or Zack that pointed that out).

 

I haven't yet fully utilized functions (still have to wrap my head around certain coding), but in my real world case, I could certainly just have my items do a rapid non-random A to B 'wiggle' for now, while I figure out how to randomize it..

 

I guess one 'confusing' thing (for lack of better word)  for me still, is that because of the A to B nature of GSAP (at least as far as I understand it), the item will always return to the neutral/natural state... so you wouldn't ever(?) get a true random value to random value to random value... at least utilizing the tweens... again, unless I am not aware of some other command/feature.  Even with a random value in a tween, it would still snap back to the natural position each cycle.... or am I wrong there?  I was previously thinking maybe I could use the GSAP.set feature to continually change a parameter randomly... but then I'd have to somehow cycle that... so, then I seemingly might as well just do a Javascript thing?  (.... sorry, that was just me thinking aloud  ) 

[ZachSaucier]

10 minutes ago, ladlon said:

I guess one 'confusing' thing (for lack of better word)  for me still, is that because of the A to B nature of GSAP (at least as far as I understand it), the item will always return to the neutral/natural state... so you wouldn't ever(?) get a true random value to random value to random value... at least utilizing the tweens... again, unless I am not aware of some other command/feature.  Even with a random value in a tween, it would still snap back to the natural position each cycle.... or am I wrong there?

It all depends on what you want and how you set it up. You can have random values. If you want them relative to the previous end point then use repeatRefresh. If you don't, just use .fromTo() with random values for the start and end values.

 

Demos speak louder than words.

[ladlon]

I was thinking that (using a fromTo), but I assumed that even with a random value set for both the to and from states, it would TWEEN from the first to the second, but then snap to the first value of the second cycle of the tween... so it would be A to B, snap to C, tween from C to D, snap to E, tween from E to F, etc...  Unless I'm misunderstanding how it works.

 

Code I'm assuming for this example:     gsap.fromTo(".item", {opacity: "random(0,100)%"}, {opacity: "random(0,100)%"});

 

I suppose the smart thing for me to do is actually TRY this and see if my assumption is wrong, then endlessly type about it here!  

 

Still a few assumptions and misunderstandings I have to stamp out on my journey of GSAP enlightenment!....

[PointC]

6 minutes ago, ladlon said:

I suppose the smart thing for me to do is actually TRY this and see if my assumption is wrong, then endlessly type about it here!

Yep.

[ZachSaucier]

8 minutes ago, ladlon said:

I was thinking that (using a fromTo), but I assumed that even with a random value set for both the to and from states, it would TWEEN from the first to the second, but then snap to the first value of the second cycle of the tween... so it would be A to B, snap to C, tween from C to D, snap to E, tween from E to F, etc... 

Yep. If you just want random values then just use a repeating function with .set() inside it.

 

8 minutes ago, ladlon said:

I suppose the smart thing for me to do is actually TRY this and see if my assumption is wrong, then endlessly type about it here!  

Agreed.

 

@ladlon I think going forward it might be helpful to you to just describe: "here is what I have <insert demo>. Here is a description of what I want. How do I do that?" instead of "I think I can do X through Y but I'm not sure about Z". That way we can answer your question more directly instead of trying to interpret what you're attempting by parsing your description. Does that make sense?