ladlon

Yep, I just noticed a reference to that... (I have a TERRIBLE habit of figuring stuff out immediately after making a forum post... It's like CLOCKWORK with me!) So the URL in the browser window containing the codepen.io website (and my current project I did in it)?

Ugh... I was going to ask about how to edit codepen (since the tutorial doesn't seem to show how to actually embed the finished codepen item)... but I thought, "Hey, I should just figure it out myself, instead of pestering the good people here....". So, I did a search, and the one vid I found said to just paste it in the post... and that obviously didn't work. I tried a direct paste (which just literally pasted the text, rather than treating it like code).... So then I took what seemed to be the logical step, and did a 'code' insert... and got that lovely window. (Facepalm) Okay, now that I humiliated myself, could someone tell me the right way to do this? BTW, how DO you remove inserted code block? There doesn't seem to be any delete command for them. Wow, I'm leaving a great impression here, eh?! (Sulk...)

https://codepen.io/ladlon/pen/BaogxXE

Ya, I'll be making one. Just been trying and sorting it out over here. I've read up on codepen (...never had used it before), so now I have no excuse! Just going to take a while to set up a demo version. Feels like I'm really close, but there's some little factor that is preventing it from working as intended....

Put both lines in a timeline, and then loop the timeline? Am I close?..

UPDATE: Okay, it looks like maybe it would use the gsap.set command... and that works, but it only triggers once (I have it before the actual positional animation tween). Each time I refresh the browser, the horizontal position is sucessfully randomized... but since it is on a code like before the positional tween, and because the positional tween is an infinite repeat, it just repeats using the same horizontal value. What I would need to do, is have the positional tween a single cycle, and then somehow combine the two lines (set line and positional tween line) into some sort of infinite loop. Not sure if GSAP has that, as I haven't run into that sort of thing yet. So, I'm going to search for that. Up to now, it only seemed like a GSAP loop is all within a single tween... but, I'm sure I'm wrong on that. Back to the books...

Hi. So, I am trying to have an item moving upwards, but each time being at a random horizontal position. I tried doing it via this: gsap.fromTo(".thing", {left: "random(10,90)", bottom: "0%"}, {bottom: "70%", ease: "linear", repeat: -1, duration: 1.5}); But, it seems the horizontal value doesn't get randomized. I'm also assuming that if I define a property in the first block (From), but do not have a matching pair for it in the second block, it will just remain/retain that established value, and not tween... or am I wrong on that? -Am I utilizing the random() feature properly here? -Do I need a matching pair for the randomized property... and if so, would I do it by setting the randomized value beforehand into a variable, and then using that variable in both the From and To blocks? -In my tests (where I added a second (matching pair) randomized left in the second column, it seems that with each repeat, it used the same values, rather than generating new random values each cycle. Is that the case? (It retains the initial random value, and uses it with each cycle?) If so, is there a means to have it infinitely loop, yet generate/use a new randomized value for the tween each time? (I'm very new on this, but I'm suspecting maybe you do a single cycle tween, and then put it in a timeline, and have the playback head either reset or loop after each timeline play?) I have the feeling that maybe there's other commands/features that I haven't looked into yet that might address this sort of thing. I'm currently keeping pretty restrictive, using just the To, From, and FromTo type basic things. I'll probably run into the solution as I continue studying further, but if anyone wants to chime in, that would be awesome! (BTW, I'll say it here and now... Great people here on the forum. Impressively prompt and helpful. Thanks!)

Yep, the test project I've been working on is actually my real website front page. Within the first day, I had my 'sprite' image on my website randomly bobbing and rotating overtop the background image (position:relative to allow overlaying), which was what I was after. I'm finding GSAP quite logical and easy to learn. Just stumbling on simple things initially, like putting things in quotes when I shouldn't, or vice versa.... and the usual little typos. It's been complicated a bit by the animations having to be within a responsive Bootstrap column... and I was attacking CSS relative positioning for the first time, in order to put the 'sprite' overtop of the first (background scene) image. Over the last half hour or so, I was puzzled by the seemingly random placement I was getting using xPercent... but I just found a great video explaining it (IHateTomatoes video series), so that should be cleared up soon. It's not related to GSAP, but one thing I have to nail down is having multiple 'overlay' objects (position:relative) overtop of a 'background' image... within a responsive column. For one thing, I was unsure if EACH object was relative to the 'background' image... or each is relative to the one defined before it... which would explain why the position values are not what I'd expect. But, this is only day 2, so I have to be patient and keep studying...

In retrospect, the chart totally makes sense to me. Just kind of interpreted it wrong. (Shrug) Thanks for your patience with my stumbling around with this. I like to deep dive into things quick!

Thanks for the clarification. Ya, that question was based on that actual chart. I was just misunderstanding it, as I was confusing the 'GSAP core' with the GSAP file (the first item listed in the chart). Yep, makes sense. As usual, just a simple misinterpretation on my part. I've gone through much of the documentation and videos before even starting my tinkering... I'm just still getting used to some of the interpretations, and battling my own assumptions/undersandings. (Probably didn't help that one of the videos I was referencing from is MANY years old!)

Hi. I just wanted to get a quick clarification... I want to use xPercent, which I understand is provided via the CSS plugin. But, I'm a bit confused about some little things... 1) I've seen 'the CSS plugin' referred to 'CSSPlugin', whereas the (current) batch of 'core' plugins has CSSRulesPlugin only. I'm assuming that's the same thing? 2) In order to use the plugin, the documentation says to simply load the core. I was uncertain if that was just the gsap.min.jp file you can CDN via the link provided on Greensock's front page contains ALL the core files (that, for example, you'd find in the minified folder of the local version), or if you have to do a CDN for the individual js files as well. (I assumed the CDN contains all of them) Sorry, I just wasn't sure, and I wanted to verify it.

Hi. I literally just figured out the problem after posting it. It seems the brightness() requires a % sign (I thought you could use a 0-1 range without percentages). I would normally use percentage values, but didn't think I would be allowed to have a random number item, and just have a percentage symbol after it. Turns out, you can! Sorry for not having a CodePen demo. The single line of code I included in my post is pretty much it, really. I figured there was just some syntax error in it that I was missing or unaware was an issue. It's working now...

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)

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

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!

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.

Yep, got it. Thanks!

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.

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!

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.

@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!

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

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!)

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!

I'm not doing any Z depth adjustment, so your current answer totally works for me! Thanks!