ladlon

Yup, that's what I figured when I saw the lack of quotes... but, at that point, I was desperately trying any combo of things. The code makes sense. I just have to see if it works on my side (which is what I'm currently doing). Who knows... maybe there's some other factor that is also messing it up over here.

Yes! There we go. That's what I was after. Ya, I've been reading the MDN docs. It's actually open in front of me as we speak. I understood the drawImage command, but couldn't figure out how to have both the image source and the image properties referenced by it. I was trying all variations of IDs, Classes, in quotes, not in quotes, etc. One of the differences between my (latest) attempt and your codepen demo was that was trying to store an <img> (that was on the page) into a variable via the getElementById(), so that (theoretically) the drawImage() command could use it as it's target (since it seems to use object names, rather than class/ID names. I previously did try the .src attribute of the object, as you have in your demo, but that didn't work for me either... most likely some other factor was messing things up, so even though I got THAT part right, I didn't realize it, as the image wasn't showing up. Okay, let me give that a try over here. That's definitely what I was after. Thanks.

Could you show me the same codepen demo of the moving cube, but with an image, though? That's what I'm trying to figure out. I know how to do animations with 'plotted canvas shapes', but to do it with an image, you would use drawImage()... but I don't get how you reference BOTH the source image and the various properties of that source image... since, the drawImage() seems to use an object name as the target, rather than a class or ID. Seems like you would still define an object, as you did with the canvas shapes, but would have to add the source of the image as one of those properties... or what? I've tried a few variations of that, but can't seem to get it to work. Please show me using an external png image as the animated element.

@OSUblake: Sure, I get that you can draw shapes, and even place an image on the canvas (using ctx.drawImage, and the various shape/line plotting commands)... But, the confusion comes from the fact that, as you say, the Canvas is just pixels... a photo of something. You can't grab anything on it, as it's like a flattened layered image file... no separate elements to grab. My understanding of how GSAP actually works/communicates with Canvas has ping ponged, as I read/view different references to it. I'm going to do a ton more reading, but as of yet, I still do not understand WHAT exactly your access with the tweens (when you want to animate Canvas items) and HOW you do it. It seems the material on GSAP doesn't mention Canvas much, and the Canvas material doesn't mention GSAP much... I understand and am comfortable with GSAP... and am 'familiar' with Canvas... the blank area for me is how the two interact. I'd normally just learn Canvas and leave it at that... but my whole reason for using GSAP (besides the nice single line tween code, with no need for coding intervals/callbacks, etc), was that it had systems/coding built in (under the hood) to ensure that it works on everything... without me having to deal with/code it myself. Going pure Canvas, I wasn't sure if that would still be the case. Hey, that SVG thing looks great! That's what I'm after (...assuming I can animate those using the GSAP tweens, which I assume you can). Weird.. I always thought SVG was a vector format. What am I confusing it with??? That's why I never really paid much attention to it (as far as GSAP), as I thought it was just a vector format, and I want to use PNGs (...or anything that is good quality, and has full transparency support). Okay, I'll definitely look into that. @elegantseagulls: Hi. Ya, I thought that, too... But, I just can't seem to get it to work properly. Always some aspect of it doesn't work. I rebuilt the whole thing again today, trying that out... Whereas previously the child objects wouldn't SCALE with the parent object (and everything else worked)... today's version (which I coded a bit different) had the scaling working great... but the positioning wasn't working right! Seems like it SHOULD work, but something always is compromised. That's why I was considering Canvas, as it kind of allows you to 'precomp' everything before it gets scaled down... I'm still wanting to try that route, if/when I ever figure out how to actually access whatever it is (of the smaller elements) I'm supposed to access... however I'm supposed to do it. One issue, already, with Canvas, though... It doesn't support animated GIFs, which I need in this particular case (...although I'm going to try a few things to see if I CAN actually do those animated elements via GSAP/Canvas... might work...).

For my current purposes, all I really need to do is have some smaller png images animating on top of a larger 'stage' png image... just randomized drifting of position, rotation. I also have randomized drifting of things like brightness, scale/skew. But, that's pretty much it. No sequences or timelines or interaction. The only reason I'm even trying to use Canvas in this case, is because I want the 'composite' of those to scale as one unit within my responsive page. I tried doing this with just DOM images, making the smaller images position:relative and shifting them up and onto the larger image using left: and bottom:. All that worked fine... although the positioning was really hit and miss, due to the fact that the larger (stage) image was changing size, and the smaller images had no proper way to be parented to it fully, so I'd have to manually adjust them for each screen size, and make compromises. I liked how Canvas allowed me to build the 'scene' (smaller images on the larger image) on a FIXED size image, so all values could be hard coded/real... and THEN that composite would be responsively scaled. But, currently, the mystery to me is how GSAP and Canvas are linked/communicate. You telling me that the 'DOM' items are tweened, and then put onto Canvas (somehow) is already a huge insight, as all the other references I've seen just seem to be working entirely in Canvas 'code', with no apparent GSAP... or the code is complex, and pretty tricky for me to full follow with complete confidence. I'll definitely look over the links you provided. I'm already reading the Canvas guide from the Mozilla site. I'm sure it's fairly simple to do this... I just have no concept going in how the two communicate.

Okay, that guide page you sent me to looks good. Thanks. I didn't want to rely on some random guy's video on YouTube, as who knows if his technique/coding is clean. Okay, so I guess GSAP hasn't changed much, nor the methods in general... I just wanted to be sure, as I don't know (...I'm new). Just like the guys who used to structure websites using Tables, it's a good thing to check once in a while with the experts to see if something better has come along (...like CSS positioning, Bootstrap,etc). Otherwise, I'm going to be one of those guys (unintentionally) doing things old-school... in a bad way. I'm still unclear on the linking between GSAP tweens and Canvas items... again, new guy. I have a vague conceptual understanding of things like callbacks... and I think I get what a ticker probably is... but that's exactly why I'm trying to find a good resource to teach it to myself. So, are you saying that you actually tween an image item that's in the HTML (like you would with non-Canvas GSAP animations), and then somehow transfer that to the Canvas element? I was seeing some code that hinted towards defining the canvas as a variable or item, but could never quite get what was happening (since I was generally looking at specific, and often complex, examples that someone was asking about... rather than some clean, simplified tutorial example). I thought I could tween a Canvas item by referring to it by it's name (...I tried classes, variable names, etc)... but no go. If I understand what you are saying, it seems I was doing it in reverse?

Hi. What I'm asking, is where do I find a current guide on how to animate (via GSAP), images on a Canvas. I've found a number of different refernces, but many are years old (different version of GSAP, and also may not be the best/current method)... and others seemed to be just pure Canvas, with no GSAP... at least as far as what I currently can recognize. I am comfortable animating DOM items with GSAP, and I know how to place images on Canvas... but I have yet to find a good reference/guide as to how to tween an image on a Canvas vaia GSAP. I tried doing a regular GSAP tween, referencing the Canvas image items by their class title (which I added), but that didn't seem to work... nor am I even sure if that's the right way... since I can't seem to find any info on how to do it.

Where can I find a guide for the current and proper method to control images on a Canvas via Greensock tweens, in a way that has the same 'works in everything' quality that other GSAP commands do? Most of the references I've found over the last two days seem to just animate using Canvas commands (rather than GSAP tweens) or are examples from years ago, or have a lot of support coding required.

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

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 )

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

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!

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!

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?

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

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.

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.

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.

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)

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.

Cool! I'll try that out. Thanks!

Neat, it worked! I feel like a real club member now, me with all my codepen stuff happening and all that! I'm big league now!

https://codepen.io/ladlon/pen/BaogxXE#code-area Trying to have a repeating upward movement tween, but with a different horizontal value each cycle. Win7 GSAP3

Okay, I'll try it again. Just didn't want to accidentally post something that was a security issue! (...That would have been the cherry on top of all this! Ha!)

Messed up again... I tried pasting the URL, and I got text saying something like 'View the Codepen from ladlon"... but I was expecting it to instead show the usual codepen window I'm seeing in everyone else's post. Am I doing it wrong? (Good grief, I'm feeling like some senior citizen who never used a computer! I'm normally really good with stuff... Honest! )