Using random function in filter property

[ladlon]

Hi.  Is this the proper syntax for applying a random number to a filter property?  I wasn't sure if you needed quotes, or how the % should be included.

 

gsap.to(".item", {filter: "brightness(random(0,100)%)", duration: "random(1,5)", repeat: -1, repeatRefresh:true});

 

 

And, just to verify, this method of using the  repeatRefresh property will result in different random numbers being generated each cycle of the tween, correct?

 

I have a number of tweens (with different filter property targets), yet some are not working (when the previously did), and I seem to be getting odd results (resulting effect doesn't seem to match with numeric range coded in, etc).  Not sure what happened.  Can't see anything 'wrong' in the coding I have over here.

[GreenSock]

A demo would really help in being able to diagnose what's going on, but...

1. repeatRefresh only affects tweening properties - it does NOT affect duration, delay, etc. 
2. "filter" isn't officially supported because it's not compatible with some browsers. We do have an unofficial plugin that you could use if you'd like, but it's not guaranteed to work in all browsers. 

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

[ladlon]

Hi.  Understood (regarding the helpfulness of a demo), but I'm just asking as a general question of proper syntax.

 

So, how would one code a tween where it uses a random value each cycle?  Would you need a second line of code that generates a random number and stores it in some sort of  variable, then use that variable in items in the tween (like the delay and duration)?  Or is there some other method?

 

Also, due to the lack of full support for filter, is there some other means of doing simple adjustments of brightness, contrast, and hue?  I'd settle for just brightness if I had to.  (Note, this is for a non-canvas item)

[GreenSock]

7 minutes ago, ladlon said:

Hi.  Understood (regarding the helpfulness of a demo), but I'm just asking as a general question of proper syntax.

 

That's fine, but you said that it was acting strangely for you and you're getting odd results. That's where a demo is essential. 

 

8 minutes ago, ladlon said:

So, how would one code a tween where it uses a random value each cycle?  Would you need a second line of code that generates a random number and stores it in some sort of  variable, then use that variable in items in the tween (like the delay and duration)?  Or is there some other method?

You want it to use a different duration on each iteration? Then just use a function that gets called onComplete (sorta like recursive):

function randomBrightness() {
  gsap.to(".item", {
    filter: "brightness(random(0,100)%)", 
    duration: gsap.utils.random(1, 5), 
    onComplete: randomBrightness
  });
}
randomBrightness();

 

10 minutes ago, ladlon said:

Also, due to the lack of full support for filter, is there some other means of doing simple adjustments of brightness, contrast, and hue?  I'd settle for just brightness if I had to.  (Note, this is for a non-canvas item)

As far as I know, there's no [consistent] such thing outside of canvas or SVG. Maybe these will help:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer

https://vanseodesign.com/css/filters-to-adjust-brightness-contrast-opacity-and-inversion/

 

Happy tweening!

[ladlon]

Thanks.  Yup, I actually learned and signed up for Codepen just a day or two... as a result of my discussions on this forum.  I just wanted to get the general rules/comments about the feature/issue, as I could probably then figure out what I was doing wrong myself.  But,  ya, if it still persists, I'll definitely fire up some codepen demos.

 

Odd thing is, the filter features seemed to have worked up to late yesterday, and then something I did seems to have broken that, and all but the cepia don't seem to have any visible effect... meanwhile, they all share the same code!

 

I suppose I could look into Canvas.  I got the impression (when I first looked into it) that browser support for it was a bit dodgy, so I kind of abandoned it at the time.  Not sure where we are at these days.  I'm only a few days into GSAP as it is.  I was 'Flash' (and then switched over to animated GIFs) up to recently, when I re-discovered (and was finally won over by) GSAP.

 

I'm always (overly?) concerned about browser/platform support... but at the same time, I am repelled by any need for workaround code/methods... So 'works on everything, out of the box' is kind of what I look for.... or I just go old-school.  (..hence, the animated GIFs  )

 

I'll try functions.  Never really used them before (although I know how to do them).  I kind of suspected it would be functions or pre-assigning a variable that would be the fix.  I still have to really study the GSAP cheat sheet, now that I am comfortable with the general concept and commands.

 

Thanks for the code explanation!  I'll give that a try.

 

 

[ZachSaucier]

31 minutes ago, ladlon said:

I suppose I could look into Canvas.  I got the impression (when I first looked into it) that browser support for it was a bit dodgy, so I kind of abandoned it at the time.  Not sure where we are at these days.

Canvas has fantastic browser support.

 

32 minutes ago, ladlon said:

I'll try functions.  Never really used them before

I highly recommend my article on animating efficiently!

[ladlon]

Hrmm..  I guess I need to revist Canvas, since it also seems to be required for some of the plugins (and seemingly some of the techniques) I want to try.

 

Yep, I've been watching loads of vids and reading up on GSAP.  If I haven't watched your Efficiency vid already, it was definitely on my 'next up' list.

[PointC]

Pixi has lots of filter effects too. GreenSock even has its very own plugin for it.

 

https://greensock.com/docs/v3/Plugins/PixiPlugin

 

1 hour ago, ladlon said:

Hi.  Understood (regarding the helpfulness of a demo), but I'm just asking as a general question of proper syntax.

As I mentioned in your other threads, demos are important even if it's for something you think is simple. Not only is it good practice and greatly assists us in providing you with the best advice, but quite often you end up solving some issues simply by creating a demo.

 

Happy tweening.

[ladlon]

Yep, I was avoiding Pixi initially, as it required Canvas... but, now I may reconsider using Canvas, so that option is open again.

 

A lot of time, I do not have a suitable demo.  I'm actually in the process of making one for one other issue I'm having, and it is taking a lot of time/effort, as I have to strip away all the redundant/irrelevant code, etc... otherwise, I'd provide a codepen demo for every post.  Many times, though, I'm just asking about proper syntax... general questions, rather than specific to my code.

 

But, I have a codepen account now,  since yesterday, and am trying to utilize it for my posts.  It is just very timeconsuming to set up my particular examples.  That is partially due to how I am coding things in my tests... which don't work well with how codepen does things...  That's a flaw on me, but nonetheless, it's present and what I have to currently deal with.

[GreenSock]

Thanks for putting in the effort to learn codepen and craft demos for us so we can help you better.

 

I would personally have ZERO hesitation about using <canvas>. It has outstanding browser support. 👍

[PointC]

1 hour ago, ladlon said:

It is just very timeconsuming to set up my particular examples.

Try not to over-engineer your demos. Just a few divs or images and minimal code is always best. It's almost never a good idea to include your actual assets. For example, your brightness filter question from above could be something really simple like this:

 

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

 

You'll notice I just used a random unsplash image. That can be quite handy when you're just trying something with images. Then you don't need to worry about uploading or linking to your actual project images.

[ladlon]

Understood... but in my case, I was having to strip down a complex chunk of code to make it useable/understandable for the codepen demo.  Half the problem, is that in many cases, there are many other sections of code/properties that may be conflicting...

 

So, on one hand, I need to keep it simple, so the viewers will understand it out of context (and not have to deal with loads of properties and other things in there to 'make it work' in my real project)... but on the other hand, (at least in some of my particular issues), I have to show it in conects of what else is surrounding/affecting it.

 

So, it's been challenging.  One of the things I'm struggling with, in general, is juggling the numerous combinations of properties within several elements, which can (and possibly are) messing with each other.

 

But, ya, I like codepen, and will be using it.  This forum is the one that got me signed up and learning it.

 

(EDIT:  Sorry, I should point out, when I say things like 'complex code', I'm not implying it's complex to other users or yourselves... or that it's anything impressive...  Just meaning it's a lot of stuff for ME to wade through and try and simplify for the demo!)