Web Animation Question
- Started
- Last post
- 13 Responses
- pinkfloyd
I guess javascripting is the most raw way of animating on the web? I remember in actionscripting, there were properties, methods and event handlers.
My question is where can I get a list of properties?
What's the equivelant of stage width, x position, mouse position in javascripting?
Document size? Window size? Window resize?
There was also the syntax of adding a "." going into the properties path. Like window.movieclip.width;
Is it the same with javascripting? Something with window.class.width? Is "class" supported by older browers?
- PonyBoy0
take a look at Adobe Edge... and also look to http://greensock.com/ if you want to get a little more raw... that's about as deep as I go :) (I'd like to know more too!)
- monNom0
Yes, Javascript is really similar to AS2 in that it uses a dot syntax to access properties of objects. So the equivalent of "_root" might be "window", or "document", and they have a bunch of methods you can use to do stuff with.
If you're wondering about methods on a specific object, you can use the console in Chrome by hitting the F12 key when on a webpage. This gives you an interactive command line that you can used to manipulate the webpage, test scripts, and find out all sorts of things about what's going on behind the scenes of your browser. It's like being able to change your actionscript in a running flash movie and seeing what happens - way cooler than constantly recompiling.
In the console, if you type "window." it will list all the available properties and methods available for the window object. If you type 'document." you will get all the properties and methods for the document object, which is a child of window but you can access it directly because you are operating within the window's scope.
To access properties of some things (like mouse position), you need to attach an event listener that fires when the mouse or whatever changes.
you would do that as follows:
var mouseX; //create a variable to hold last mouse position
window.onmousemove = function(e){ //attach listener to 'mousemove' event
mouseX = e.offsetX; //set mouseX variable with mouse position;
}//mouseX will now have the position of the mouse when it last moved.
There's tons to learn. I'd suggest doing some beginner tutorials or getting a book to learn the ropes. If you understood moving things around in AS by adjusting X/Y values, javascript is very similar.
- ********-1
You might want to lose some weight first you fat fuck.
- dude!trooperbill
- http://f.cl.ly/items…pinkfloyd
- http://i.kinja-img.c…pinkfloyd
- why he haz a green username?CygnusZero4
- dee-dubs0
Greensock for sure - it's animation is smoother than raw JS/CSS, timings and sequencings are robust.. plus they have just added MorphSVG plugin which is really going to take GSAP animation to the next level.
couple morph SVG examples:
http://codepen.io/chrisgannon/pe…
http://codepen.io/chrisgannon/pe…Also using GS takes a lot of the pain of browser inconsistencies away.
- pinkfloyd-1
With the greensock thing, I like it a lot but do you have to set the CSS positioning as relative all the time? When I did absolute, the animation didn't work.
BTW, I can't get the greensock thing to work with scrolling.
- fyoucher10
Def Greensock. I'm also a transitioned AS Dev/Animator and didn't even really have to learn GSAP JS.
Stage width = container element width.
MovieClip / Graphic (i.e. element / div) width = element.style.width.Check out w3 schools for documentation. If you're familiar with AS, then you should grasp JS within a couple of days.
Relative: Yep, but it depends on if you're adjusting CSS (top / left) or 2D transform (x / y) -- they're different. The big difference is that you'll get smoother slower tweens using 2D Transform b/c of sub-pixel rendering, but if you don't need it tweening CSS would be better (i.e. top:34, left: 55). However, the big thing to keep in mind with 2D transform is that it's relative to where it INITIALLY started unless you add quotes and increment (ie. x:"-=30"). So the start X/Y for the element will always be 0,0 even if the CSS top / Left is absolute and have diff values. If you want to tween the object again, you would set it to the new position relative to the start position using no quotes. If you want to do relative to the CURRENT position, you would use quotes (x: "-=20", y:"+=10"). So if you do a few 2D transform tweens and want to go back to the start position, you would X/Y back to 0,0, if that makes sense. This seems different than Flash which has the same cartesian coordinate system but everything is relative to the top left of the stage and if you're thinking "main timeline" co-ordinates for everything, whereas GSAP's 0,0 is the "elements" top left rather than the "stage".
FYI, I haven't had enough coffee just yet so I could be writing rubbish right now.
- WhiteFace0
I'm loving CSS3 Animations, they seem 'cleaner' than JS too but maybe that's just me
- fyoucher10
Some good articles from GSAP on JS vs CSS animation >
https://css-tricks.com/myth-bust…
http://greensock.com/css-workflo…
http://greensock.com/css-perform…CSS, probably good for simple user interface animation type stuff. Intricate animations, hell nah.
- section_0141
Animating what exactly? Simple animations? Web Games? Praystation style shit?
- Character animation, shit that moves along a motion path, effects, etc. More than just simple or straight slide, fade, or scale in type stuff.fyoucher1
- pinkfloyd-1
I'm a bit hesitant with css3 because it mostly works on modern browsers.
- pinkfloyd-1
Someone asked what kind of animations I wanted to do. Stuff like this, mainly UI http://www.revolution.pn/
