Coder Social home page Coder Social logo

sproutcore / transformjs Goto Github PK

View Code? Open in Web Editor NEW
228.0 228.0 23.0 165 KB

A jQuery plugin that provides an abstraction over 2d and 3d transforms - Project Owner: jtaby

Home Page: transformjs.strobeapp.com

License: MIT License

Ruby 8.12% JavaScript 91.88%

transformjs's Introduction

Gitter Build Status

SproutCore 2: For Native-Caliber Web Apps

Sproutcore 2 no longer support the Abbot Buildtools which has been replaced by the new Node.js Build Tools.

SproutCore is a JS-MVC framework for building blazing-fast, native-caliber web applications. SproutCore's full-stack approach to single-page application development gives you the tools you need to build rich, powerful applications... which happen to run in the browser.

Getting Started

The easiest way to get started with SproutCore is to install the Ruby gem. You can find instructions here. Once you've got SproutCore installed, checkout the Getting Started tutorial.

Next Steps

Once you're through the Getting Started tutorial:

Support

Resources for SproutCore developers include the docs for API documentation, and the Guides for a series of topical walk-throughs.

For additional SproutCore user support, join the mailing list, or stop by the #sproutcore IRC channel. For those interested in contributing to the framework itself, please join [email protected].

Acknowledgements

SproutCore includes code from a number of different open source projects including:

transformjs's People

Contributors

coreh avatar jtaby avatar lukemelia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

transformjs's Issues

sproutcore-touch.js is generated when using the bpm package

TransformJS' package.json specifies sproutcore-touch.js as an output file. I think this is for the included demo.

As a result, though, if you use the TransformJS bpm package in another project, you will end up with sproutcore-touch.js being output to your assets directory, even if your project doesn't use it.

no main field in the package.json

There is no "main" field to start at and no "script" field to run the rake build step, so installation requires manual intervention.

Transforms using non-standard length values in matrix function (breaks Opera)

Firefox implemented the matrix function against the spec, which requires a <number> rather than a <length>. [1] For this reason TransformJS doesn't work in Opera (which implemented according to spec), or probably other browsers that have implemented the spec ( for example, tell the script that Chrome doesn't have 3D and it breaks on 2D).

Perhaps the approach in https://github.com/sproutcore/TransformJS/blob/master/lib/css_hooks.js#L40 could be switched so the translationUnit only gets added for Firefox? Thoughts?

[1] http://lists.w3.org/Archives/Public/www-style/2009Oct/0360.html

Different rotateZ behavior in IE

I've written a pair of functions that rotate a div back and forth around its center point:

 function graphic_rotate_cw() {
    jQuery("#bg-circles").animate( {
        rotateZ: '+='+.15
    },4000,function(){graphic_rotate_ccw();});
 }

function graphic_rotate_ccw() {
    jQuery("#bg-circles").animate( {
        rotateZ: '-='+.15
    },4000,function(){graphic_rotate_cw();});
}

They work exactly as expected in FF, Chrome and Safari. But in IE7-9, the image rotates around its lower-left corner instead.

RotateZ direction

transformJS turn element in a wrong way with rotateZ (except with ie filter polyfill (!))

natural css transform rotateZ direction is (clockwise)
transformJS rotateZ is (anticlockwise)
transfomrJS with filter polyfill (ie 6-8) is (clockwise)

Documentation: requires jquery 1.5.1+

The inline code (as of beta2) says: "jQuery 1.4.3+ is needed for this plugin to work"

However it does not work with 1.5.0 (in Firefox 11 or Chromium 17)
Lots of: Warning: Error in parsing value for '-moz-transform'. Declaration dropped.
The web site demo uses 1.6.2 and that works for me.

I tested and it works with all of 1.6.2, 1.6.1, 1.6, 1.5.2 and 1.5.1
(also, going forward, with 1.6.3, 1.6.4, 1.7, 1.7.1, 1.7.2)
It fails with 1.5.0, 1.4.4 and 1.4.3.

P.S. The 1.5.1 release notes are here, in case someone wants to work out why:
http://blog.jquery.com/2011/02/24/jquery-151-released/

Should use -ms-transform in IE9

It's great that you use the filter for backwards compatibility with IE8 and lower, but since IE9 supports css transforms, it would be great if this library used them on that browser.

Should allow for the forcing of 2d transforms

When Webkit uses hardware-accelerated animations on elements containing text, the text is rendered to an image in order to animate more efficiently. (I believe this is the cause, but the only evidence I have is cursory Googling.) You can see the difference in 2d and 3d in this fiddle.

For this reason, it'd be nice to be able to force an animation to 2d, even in 3d-supporting browsers. One example is 3d-animating an element, and binding the transition's end to switch to a 2d transform. I've hacked this together in a way that's not worthy of a pull request, which you can see in this gist.

Essentially, it's another CSS hook for use3d that defaults to true. Unfortunately, it's cached, so if you declare it false once, you need to declare it true elsewhere. And you need to declare it as the first property in the list. So yeah, my implementation sucks, but I'd love to hear your thoughts on this feature.

Wrong transform-property prefixes

Currently, prefixes for the transform-property are defined as prefixes = [ "Moz", "Webkit", "O", "MS" ]
This is not correct, since javascript is case-sensitive. The correct values are prefixes = [ "Moz", "webkit", "O", "ms" ].

images get unsharp

Hi!
on animation and zoom of images all images get unsharp in Safari, Chrome, IE (all newest version) only in Firefox images get sharp.

Wrong 2d-matrix

Currently, the 2d-matrix is built by the following code:

  if (supports2d) {
    s  = "matrix(";
      s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + ",";
      s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + ",";
      s += tM.e(3,1).toFixed(10) + "px," + tM.e(3,2).toFixed(10)+'px';
    s += ")";        
  }

This is not absolutely correct, since the suffix "px" in two last attributes is only supported by firefox (property MozTransform). All other browsers are expecting a matrix without any unit, ignoring any matrix that is built with a unit inside.
The corrected code (for other browsers only):

  if (supports2d) {
    s  = "matrix(";
      s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + ",";
      s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + ",";
      s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10);
    s += ")";  
  }

Can you set a Scale/Rotate Origin

Hi. I'd like scale inward, basically a rectangle shrinking while maintaining it's centering. It scales by the top left corner currently. Do I need to do something like negative margins in a wrapping container div to get around this?

Love the library,
Francois

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.