Jump to content
Search Community

Easiest brightness or contrast tween method?

ladlon test
Moderator Tag

Recommended Posts

Hi.  I'm only a few days into GSAP, but loving it.  Already animating.  All is good...

 

One thing I wanted to do, though, was randomly undulate the brightness of an image element.  From what I read, I should be able to use the (included in free GSAP) brightness feature of EaselPlugin.

 

But, nothing seems to be happening.  The code doesn't appear to be wrong, in that the other animation (from the same line/tween) is going fine (...it usually doesn't go if there's some syntax error).

 

I went through the usual 'oops' moments... forgetting to load the plugin... and later finding out that it's in a different URL.  So, I did that song and dance already.

 

So, some questions:

 

1) What's the easiest way to undulate the brightness or contrast using vanilla/free GSAP?  (Not looking for the code specifically... just what feature/attribute... which is in the free/vanilla version)

2) Regarding easelPlugin.... why might it not be working?  I tried saturation and brightness, and neither seem to have any affect.

 

I'm using the latest version (or pretty recent, as I only downloaded a few days ago).  Win7 Pro, coding stuff in Pinegrow Standard (latest version).

Link to comment
Share on other sites

Hey ladlon and welcome to the GreenSock forums.

 

5 hours ago, ladlon said:

2) Regarding easelPlugin.... why might it not be working?  I tried saturation and brightness, and neither seem to have any affect.

It's pretty hard for us to help blindly. Most likely the plugin isn't importing correctly, you're loading the wrong version of the plugin, or Pinegrow doesn't support adding external scripts (which I think is the least likely scenario). Or it could be that it's importing correctly but your target or syntax is incorrect. Impossible for us to say given the information.

 

5 hours ago, ladlon said:

1) What's the easiest way to undulate the brightness or contrast using vanilla/free GSAP?

That depends on what you're the most comfortable using. If you are used to using Easel then use Easel. If you like Pixi use Pixi. Or use some other canvas-based approach without a library. If you want to use CSS filters and the browser support is good enough for your use case then do that. All ways are equally valid and the ease depends on what you are used to :) 

Link to comment
Share on other sites

Hi, Zack.  Thanks for the replies to my very first two posts here!

 

Yep, I was just asking in general.  I'll probably post the code soon, once I have tinkered with it a bit more.

 

I'm brand new to GSAP (although I'm successfully animating with it so far... aside from the easelPlugin stuff!).  I haven't used (or even looked into  Pixi)... and the only reason I'm even trying Easel is because I did a general search for 'brightness' regarding GSAP (and CSS in general).

 

A bit confused... as it seems CSS has a filter:brightness feature... and from what I read, it seems that vanilla GSAP can animate that property using the CSSPlugin (as well as with the easelPlugin)... but I tried both, and nothing appears to happen (...although the code seems 'valid' and doesn't cause the other animation to cease).

 

My current try has the script being loaded within a script tag, using the github URL that I found on this forum or some other GSAP page, where some other user couldn't get easelPlugin to work, and was told that the URL is not the same as that of the base GSAP script.

 

In the animation section of the code, I have my target object (which is sucessfully animating using a single GSAP.To tag), and I just added (after the identifier) ' easel: {brightness: 0}, '  .... as well as other variations/values.  But, I see no affect on the target image.  (Yet the rest of the animation properties are working).

 

I don't have my 'work' computer fired up just yet (...just got up...), but will post the specific coding here soon.

 

But, I just wanted to verify (in general) what is required...  I load the easelPlugin via the github URL with one set of script tags (like I do with the base GSAP script), and in the animation block, I use easel with code like the one I indicated above, correct?

 

What I was also asking, was what is the 'best' method... in terms of compatibility... and whatever other relevant factors...  as I'm just wanting to do a simple 'undulate the brightness or contrast' kind of effect... have the target image tween to random values in its brightness or contrast.... much like I'm doing with things like its position, rotation, etc successfully.  Is the vanilla CSSPlugin the best, or should I continue to pursue easel (or even try Pixi... if it's available in the free version)?

Link to comment
Share on other sites

5 minutes ago, ladlon said:

I just wanted to verify (in general) what is required...  I load the easelPlugin via the github URL with one set of script tags (like I do with the base GSAP script), and in the animation block, I use easel with code like the one I indicated above, correct?

Generally you load GSAP scripts either from a CDN or from your own files. We have a great installation page that can help you get setup.

 

6 minutes ago, ladlon said:

what is the 'best' method... in terms of compatibility...

Definitely a canvas approach, with or without a library (like Easel) to help out in terms of compatibility.

 

The only other advice I can offer at the moment is use your developer tools. Without seeing code your setup it's very hard to help past that :) 

Link to comment
Share on other sites

Yep, I was reading through the installation and guide video days before even downloading GSAP.  I had trouble using local files, initially, but got it to work.  I think one thing that was confusing me, is the (seeming) discrepency between the plugin file names in the guide/video vs the actual file names.  I sorted that out.

 

My current version uses a CDN... the github URL I got from another GSAP user post.

 

Ya, I'll post the code and a graphic outline of what I've been working on.  I originally posted on the Pinegrow forum, as I was having some trouble with the layout/technique I was trying (...I have an image, and I was trying to place smaller secondary image elements on top of that... and was having conflicts bewtween the position:relative element (which worked, but threw the element out of the flow), and the responsive scaling of the page (messed up by the position:relative).  I did get it to work, though.

 

I'm using GSAP to animate the secondary images... and as far as the position, rotation, scale, that's all working great (...have it pingpong tweening to randomly generated values).  So, I was wanting to subtley alter the brightness or contrast, too... but was unsure if that was possible 'out of the box', and/or what the browser/platform compatibility was for that.  I checked caniuse yesterday, but don't recall what the chart said, currently.  (...Like I said, I just got up, so I'm a bit groggy... hehe).

 

I'll fire up the work machine, and have a look what I did yesterday, and post something more specific.  Thanks!

Link to comment
Share on other sites

Hi, Craig.  Ya, actually that's the very post I was looking at yesterday, when I was researching this!

 

I'm brand new to GSAP, and many of the attributes being dealt with.  I wasn't even aware of the filter attributes until yesterday.

 

The thing that confuses me still (since I'm new to this) is whether this is something GSAP does out of the box, or if additional plugins are required, etc.  I'm sure it's all easy.  Just specifically new to me, so I have no experience or previous knowledge of it.

 

Same with the whole webkit thing...  from the little I have looked into that (again, only a few days ago!), that seems like it's some CSS thing where the specific browser is specified... for better compatibility or something?  I have to look into that further...  But, at this point, I'm assuming that the filter attribute is the standard CSS, and the -webkit-filter one is some additional/specific version to improve compatibility or something?

 

I actually tried that (in various combos), but again, could not get any visible affect on the target image... so, I'm assuming I'm either messing up the script load, or the tween.  I'll have to explore it further today, and will get back to you guys about any new results (and supply more specific info).

 

(...Hrmm...  I just noticed, the webkitfilter attribute doesn't have the minus signs that I was using.  So, there's a potential error right there!  I'm sure this is just a simple syntax issue or something.  I'll get it today, I'm sure!)

Link to comment
Share on other sites

6 minutes ago, ladlon said:

I wasn't even aware of the filter attributes until yesterday.

Technically it's a filter property. Just trying to help you get the terminology straight :) 

 

7 minutes ago, ladlon said:

Same with the whole webkit thing...  from the little I have looked into that (again, only a few days ago!), that seems like it's some CSS thing where the specific browser is specified... for better compatibility or something?

Webkit is technically a web browser engine that runs Chrome, Safari, Edge, and some others. -webkit- was intended to work in browsers that run webkit but you might find that a few rare -webkit- properties will work in Firefox or something as well. They're especially common for experimental features. But yes, properties prefixed with that are for browser compatibility.

  • Like 1
Link to comment
Share on other sites

3 minutes ago, ladlon said:

is whether this is something GSAP does out of the box, or if additional plugins are required, etc.

My demo is only using the core file to animate the brightness. No additional plugins. If you want to see what scripts are being used in a CodePen demo, just click the little gear icon on the JS panel. Keep in mind that GSAP doesn't render anything. That's all done by the browser.

 

5 minutes ago, ladlon said:

But, at this point, I'm assuming that the filter attribute is the standard CSS

You can always check if a browser supports something by checking caniuse.com. Here's the link for CSS filter effects.

https://caniuse.com/#feat=css-filters

 

I'd recommend bookmarking that site.

 

Hopefully that helps. Good luck and happy tweening.

:)

 

 

  • Like 2
Link to comment
Share on other sites

@ZackGuilty as charged!  My bad.  Sorry!

 

Yup, it's very important for me to get the terminology right, not just for my own sake, but for communicating properly on forums.  All good!

 

Ya, I really do have to study up on webkit, just so my knowledge on that (whether I end up using it or not) is solid.  Right now, it's something I heard about long ago, but ignored... and now it's come up again, and I never really got a solid understanding of it.  So, that's on my list of stuff to learn about, even if 'just to know'.

Link to comment
Share on other sites

@PointC Ah!  I didn't realize the core had support.  I thought you'd at least require the CSSPlugin (...which is included, but I'm assuming by core you mean just using the GSAP javascript/plugin.  I'm a bit green on this, so forgive me on that! ;)

 

Oh, ya... I have had caniuse (and w3Schools) bookmarked on my toolbar for quite a while, as they are seriously valuable for me!

 

I'm just new to some of these properties and features, so I'm stumbling around a bit with those specifically.

 

I'm only really a day into this, so I'm already doing well so far.  A few more days of tinkering and research, and I should be gold!  Just got to battle a bit of unfamiliarity and possible false-assumptions here and there!

Link to comment
Share on other sites

Oh, okay, now I'm clear.  I wasn't sure if by core you meant just the GSAP plugin, or the library included with the free version.

 

Now I know!

 

Yep, read all that... I just misunderstood a few aspects of the documentation.

Link to comment
Share on other sites

No worries. :)

 

It takes some time to wrap your head around all the terminology and various files and plugins. If you haven't  done so yet, I recommend the Getting Started Guide.

After that, check out Zach's new article about writing Animation Code Efficiently. It's excellent. 👍

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

We're always here for any GSAP related questions or problems.

:)

 

  • Like 1
Link to comment
Share on other sites

Watched the video on day one... although I DO have to read the article under it.

 

I'll target the code efficiency thing next.  Just figured it was for after I have a solid learning... but, then again, start with efficient method right from the beginning, eh!

 

Thanks!

Link to comment
Share on other sites

It was funny... when I was watching the beginners guide video, as my first dip into learning this on day one, shortly after it begins, he mentions the CDN... and right away, I'm looking around and like, 'Um... Hey, what?....  Sorry, did you explain what that was beforehand?  We're only a few seconds in!  What did I miss???'.

 

Ultimately, I figured out it's a sort of live link to an online source (...unless I'm mistaken...)... but, to this day, I don't know what CDN actually stands for!  :)

 

That's been my main stumbling block, so far... Is little things like that, and explanations in documentation that might not explain/outline things that are considered pre-known/obvious.  Sometimes felt like the cart was before the horse, so to speak.

 

I just got to do some cross-referencing and stuff...  I'll get it.

Link to comment
Share on other sites

5 minutes ago, ladlon said:

It was funny... when I was watching the beginners guide video, as my first dip into learning this on day one, shortly after it begins, he mentions the CDN... and right away, I'm looking around and like, 'Um... Hey, what?....  Sorry, did you explain what that was beforehand?  We're only a few seconds in!  What did I miss???'.

Ya. What it is isn't too important for the sake of the video. 

 

5 minutes ago, ladlon said:

I figured out it's a sort of live link to an online source (...unless I'm mistaken...)... but, to this day, I don't know what CDN actually stands for!  :)

A quick search will tell you it stands for "Content delivery network". It's basically a common resource for scripts shared across different websites so that they can be cached when you load a site that uses resources that were used on a site that you've visited in the past.

Link to comment
Share on other sites

This is basically the same thing as Craig's awesome demo but without the webkit stuff. it seems to work fine in modern browsers (Chrome, FireFox, Safari).

 

See the Pen mdeYQWO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you are using the Easel plugin it's important that you are using EaselJS and working with an image in an html5 canvas (no css or html img tags). From your previous replies it wasn't clear that you were doing that. You can learn more about EaselJS at https://www.createjs.com/easeljs . GreenSock's EaselJS Plugin helps a lot with that but if you are just making your way into web development I'd recommend sticking with the CSS and HTML side of things and focusing on the fundamentals.

 

Since you're just getting started, check out my free GSAP 3 Express YouTube Playlist. You can learn a lot just from watching.

 

 

  • Like 3
Link to comment
Share on other sites

3 minutes ago, Carl said:

without the webkit stuff

Ha! Yeah I thought about pulling that out, but it took all my energy to update that demo to GSAP 3. 

 

@ladlon follow Carl, check out his YT videos and please consider joining his Creative Coding Club. He'll get you up to speed quickly. He's awesome. 👍

  • Like 1
Link to comment
Share on other sites

Welcome, Carl!

 

Okay, so the first thing that strikes me here, is you mention that it requires me to be using an HTML5 canvas... Okay, that's where I get busted.  I'm not doing that (as far as I know!).

 

I just have a Bootstrap grid happening, with one of the two (half screen width) columns containing a 'background' image (not in the traditional HTML sense, but a 'room image' if you will....), and then I'm putting a second, smaller image element over top of that via a postition:relative property (and am then animating it using GSAP).  All that is working great.

 

It's only when I tried to then have the brightness randomly fluctuating...  Firstly, I wasn't sure if I needed some plugin, or if the GSAP core would handle it... Second, until yesterday, I wasn't even aware of the filter property in CSS!....  Third, after several attempts (differnt combos/theories) using (in this case) easelPlugin and CSSPlugin, I could never get any visble effect on the target image (although the other animations, like rotation, position, etc, which shared the GSAP.To tag were still running fine.

 

So, ya, the Canvas note you mention seems like that might be the issue.  I'm basically just targeting an image tag, which is overtop of a larger 'background image' image tag, which is in a Bootstrap column... in a responsive Bootstrap page.  Again, everything working loverly, except I can't seem to get (seemingly) any features of plugins other than the core GSAP.js one... which would lead one to believe the other plugins simply aren't being loaded right.... but, everything SEEMS correct... but, I'd be the first to admit I might be missing something, or misunderstanding requirements or syntax here.

 

I'm about to start work on the website/animation again today, so I'll try and provide you guys with more helpful details (code, diagrams, etc).  In a lot of cases, I know/have the proper attributes (via the GSAP cheat sheet), but may be misundersanding how to properly insert them into an existing GSAP tage (ex. GSAP.To).  Probably some simple thing.

 

I'll check out Carl's vids, for sure...  There's a chance I maybe already watched one more previously!

 

Thanks guys... I'll keep you posted, and provide some more useful info soon.

 

 

QUICK UPDATE: Looks like Carl's vids are not ones that I had previously run into.  Awesome!  Fresh material!  Thanks for the link.

Link to comment
Share on other sites

Hello again.  Cool, I got it to work.  The scripts WERE being loaded fine, and it was partially an issue with the use (or lack of) quotes for values, and some other stuff.  I managed to do it now with just a filter: "brightness(random(0,5))" type of thing.  I have to check what the browser support of that is... and if that is an issue, I have to see if I can get maybe pixi to work (...asuming that's a free thing).

 

I'm assuming that (based on the way I'm doing this) I can't use the easelPlugin method, right?  The target has to be using Canvas?

 

BTW, here's an image showing the structure of what I wanted (...I DID get this to work, eventually, after a battle with the conflict between the secondary (overlaying) image item having to be position:relative in order to place it over the first image)... and how that then messes up the responsive scaling of the second image when the first image is scaled... but, I got that all working... and the animation of the secondary image (as far as translations) worked right from the start... and it was just getting the brightness to have any effect that was the (current) challenge.  That looks like it's solid now, too.  Awesome!

 

I'm going to take a break from tinkering, and watch Carl's vids, as it looks like a good means to get a complete overview, and hopefully dispell any incorrect assumptions and confusions I may have with GSAP.

 

I still have some things I'm trying to figure out... but I should watch Carl's vids first, as they will hopefully address most/all of them.

 

Cheers!

Link to comment
Share on other sites

9 minutes ago, ladlon said:

I have to see if I can get maybe pixi to work (...asuming that's a free thing).

 

I'm assuming that (based on the way I'm doing this) I can't use the easelPlugin method, right?  The target has to be using Canvas?

Easel and Pixi both use canvas.

 

9 minutes ago, ladlon said:

here's an image showing the structure of what I wanted

Didn't get that image. Try again?

Link to comment
Share on other sites

Quote

Easel and Pixi both use canvas.

  Well, that tears that!

 

  I'll still further look into Canvas.  I just got the impression that there was some compatibility issues.  Might be mistaken.  I was looking at Canvas from the beginning, as an alternate to Flash, and something gave me the impression there was too many issues/compatibility things, so I looked into other things (including GSAP).

 

Quote

Didn't get that image. Try again?

  Oops...

 

Here's a diagram, and an explanation.  I figured it out last night, so that's all working fine.  I figured I should show it so you get a context of what the ELEMENTS are that I was trying to animate.  The translation animations worked fine, right away, and just now, I have sorted out why the brightness animation wasn't working (...although I still have to check up on the browswer/platform support before I do my victory lap!).

 

The next big question I have (but will hold off on until I have viewed all of Carl's vids), is how you go about having multiple image elements on top of a 'background scene' image... as I was intially concerned/confused about how the third, fourth, fifth, etc elements would be positioned, as I wasn't sure if their position:relative status would be relative to the background scene, or the 2nd image (first image, which is overlayed on top of the background scene).. which would get really messy.  I get positioning a single image relative (literally) to a base/background scene image... but wasn't entirely sure how a second, third, etc image would work.

 

I did try putting in a 2nd overlay image... and although it works fine, I had to give them non-zero position values in order for them to be positioned properly... I'm not sure if that is because it is relative to the FIRST overlay image, or there is some other factor.

 

Kind of a big topic I have to figure out the truth/reality of soon.

 

Anyway, here's the layout.  The right column is essentially irrelevant to the original issue I was trying to resolve at the time, but again, I included it for context and 'the big picture'.  It's the left column that is target of the effect...  A large 'background scene' image (cyan box) with smaller overlay images on top of it (currently via the position:relative property).

 

Okay, I'm about to binge watch Carl's vids...

 

IntendedLayout.jpg

Link to comment
Share on other sites

FURTHER UPDATE: Hello...  I'm still having a bit of trouble with the brightness animation.  It almost seems like I'm misundersanding the value range of it.

 

In my current tests, it seems the brightness results are not matching the numbers I'm using.  If I use percentages, it works as expected.  I am intending to have random values to be used, so I'm assuming I have to use the regular number option, which (unless I'm misunderstanding) is a range of 0 (0%) to 1 (100%).

 

I suspect, too, there may be some issue with how I'm embedding the random number generation into the brightness property.

 

Could someone point out what I have done wrong with this coding?   I have put a brightness(100%) into the original target item, so it has a hard-coded 'normal' brightness... and the intention of the code below is to have the target item pingpong between the normal brightness and some random brightness (...between80-100%).  It seems whatever range I give, it does the same type of effect, blowing out the brightness to full white.  What am I misunderstanding here?  Is the brightness range something other than 0-1?  Am I misunderstanding how the range system works in the random() feature?

 

gsap.to(".targetitem", {filter: "brightness(random(0.8,1))", duration: 1, yoyo: true, ease:"sine.inOut", repeat: -1});

 

 

UPDATE UPDATE: Nevermind.  Sorry, I just figured it out after posting this!  (For those following along, the solution is in my post after this one)

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