Animated Snap.SVG Easing not working - svg

SVG to to animate some stuff and the easing does not seem to be working.
I can use the "bounce" easing and it works fine but the "easeinout" just does nothing it is exactly the same as "linear".
Has anyone encountered this where one will work and another will not? An example of my code is below:
whiteCircle.animate({transform: "t250,0,s0,s0"}, 1000, mina.easeinout);
AND
whiteCircle.animate({transform: "t250,0,s0,s0"}, 1000, mina.bounce);
Any help is appreciated!

My issue was I was using "easeInOut" with capitals in my actual code rather than "easeinout", also which didn't help was the fact I was moving moving things over large distances quite quickly so the effect was diminished.

Related

Open Layers - SVG Layer

I'm stuck with a problem of blurry images despite using svg, which lead me to the official OL docs with a solution which I quite don't understand - https://openlayers.org/en/latest/examples/svg-layer.html
I've tried to follow this example, but obviously it doesn't work by just copy-pasting. I would like to know where the formula svgResolution = 360 / width comes from, as it used to calculate the scale and [x,y] transforms of the div. I'm not that familiar with using OL, so any kind of help will be appreciated.

What is the Tilemill svg export resolution and zoom levels relation?

Tilemill works great, mostly very usable! I managed to get to the part where I am making svg exports of my map made with osm-bright as a starter. That seems to be fine but I cant work out how the resolution I specify for the SVG relates to the zoom levels. I guess it has something to do with the tile size, can someone help me understand this?
Thanks a lot, Joris.
First, for printing, the resolution is 90.7 ppi (some OGC standard or whatever). Some round it down to 90 ppi.
Zoom-to-scale relation is calculated in this table: 1:2132 on z18, 1:4265 on z17 and so on. Also see this page on OSM wiki for formulas.

Fabric.js flipX and flipY don't seem to work

I can't flip a rectangle to save my life in Fabric.js, even using the code straight from the tutorials here - http://fabricjs.com/fabric-intro-part-1/#objects. If someone could please take a look at this fiddle and let me know what I'm doing wrong, I'd greatly appreciate it.
http://jsfiddle.net/thardy/E4Vcr/
rect.set('angle', 15).set('flipY', true); // doesn't work
canvas.renderAll(); // this wasn't in the tutorial, but I'm pretty sure it's needed
Is this a bug in v1.4.0?
This appears to be a misunderstanding of how flipX and flipY are supposed to work. I think they are actually working in fabricjs. I've updated my fiddle above to more clearly display why I didn't think they were working. Perhaps this will be helpful to someone in the future

Nivo Slide Transitions Not Working

My Nivo slide transitions were working in an earlier iteration of this test page. But now I see they aren't working, the slides are no longer functioning as links to other pages like they should, and the captions are appearing about a second before the slide. I have gone over everything with a fine-toothed comb but obviously not fine enough.
The page in question is:
http://americanart.si.edu/index_new_prerelease_jeff2.cfm
Any help would be appreciated. Thanks
I scanned your HTML and Javascript and the only thing I can say is, you have an error on jTweetsAnywhere. It isn't uncommon that if one function, no matter where, gives an error, other stuff stops working too.
So try fixing that error first, or commenting out the jTweetsAnywhere initiation as it isn't recognised ("has no method 'jTweetsAnywhere'")

SVG Masks with relative-positionning children in ForeignObjects

I've a matter with this code, why do the foreignObject children go out from the mask ?
Here's my code http://jsbin.com/ehukom/2/
.posand .pos2should be in the mask... Where's my error?
I assume your errors are
trying only Chrome (have a look at Firefox as well) and
assuming that Chrome is right and you're in error.
The only good fix to this problem I can think of is reporting a bug.

Resources