Develop Reference

Update SVG element position

The very basic approach to move SVG image to another place is
elementToMove.animate({svgTransform: 'translate(100, -30)'}, 1000, "swing", function(){ console.log('Done!'); } );
But this is somehow fake, when I will check this with
elementToMove.getBoundingClientRect()
The result X,Y coordinates will be the same as before (as it would never move).
I need to track position of moved (translated?) elements, but I don't really know how to make it.
The only way I can imagine is to make separate class for moved elements and make some autocalculated position fields whenever move method would be called, but this is terrible idea as I already made a lot of code.

How to trigger an SVG animation on scroll?

So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!

You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'

How to make HTML elements react on mouse movements?

my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?

If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.

You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.

Controlling the animation

I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.
I have also added a couple of extra icons to make the game more fun. One of the icons is a flame which speeds up the animation for 5 seconds.
At the moment it makes all the icons move really fast all at once. Instead of this happening I want the flow to continue as usual, but at a faster pace.
This is what I have so far..
$(".character").click(clickThrottled(function () {
if ($(this).hasClass("heat")) {
$(this).effect("explode", 400);
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
}
}));
Can someone show me where I am going wrong? Look at the demo and click the flame icon to get a better understanding of the problem.
Fiddle: http://jsfiddle.net/pUwKb/52/

Easing will make all the elements ease to the top at the same time, but in a stylish way (like they slow down at the end.)
What you actually need to do is keep a flag called 'isFlameOn' or 'speedModifier' would be better. When a flame icon is clicked, set 'speedModifier' to equal like 2 or 3, which will make the speed twice or three times as fast as normal.
Remove this:
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
Because you will be changing the speed of objects individually.
Now go down to wherever you manage each icon (move them) and instead of saying: item[i].y -= item[i].speed;
Do item[i].y -= item[i].speed * speedModifier;
If you make them animate to get to the top, then you will need to keep track of each of those animate intervals and reset them. So if you create an item and then .animate it, you will need to remove that .animate effect and create a new one with the compensated speedModifier percent. You will have an easy day if you did it frame by frame instead :).
When you want the flame effect to run out, just set speedModifier back to 1. If you animated each item, you'll need to again remove the current .animate and replace it with a normal speed. Be sure to keep track of each item's random speed so that you can reset its speed back to the original speed after the effect wears off.

Look at the different easings provided by jQuery UI, they should solve your problem. To use them just set property easing of animate (if you need more advanced ones you should also include jQuery UI).
For further customization you can use the step callback of animate.

Trigger an event on a specific part of an image

I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?

Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)

You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.

i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map

An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});

I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.