Help with mootools morph on CSS (3)

[patcullen]

Hi, I'm busy putting together some ideas for a webtop, one of the
peripheral features (one of the fun ones to code) is the ability to
alt-tab between windows/forms.

So far this idea largely rests on the ability for a browser to
implement the CSS3 transform rule. Here's my mooshell example:
http://mootools.net/shell/S53HG/

I've only just started and have had many ideas for this plugin; but
don't want to continue if, or until I can figure out this problem... I
cant (even after abusing the core library a bit) get the css3
transform effect to work while being morphed by mootools. The wierd
thing is that using setStyles directly does apply these CSS3 rules.

Hopefully if you have a look at the mooshell it will make more sense.
If I can get this working, I hope to buff it up with events, plenty of
options, then stick it on forge. The only other idea I can apply it to
so far is for looking at photos in a gallery.

// pat

[Fábio M. Costa]

the problem is that you should not use the dash before the property name, because the camelCase function (http://mootools.net/docs/core/Native/String#String:camelCase) will transform it to MozTransform for example, instead of mozTransform.

-moz-transform becames MozTransform
moz-transform becomes mozTransform
mozTransform becomes mozTransform (hehe, theres no dash so camelCase() does nothing)

So heres a working example, it should work if you just remove the dash from start too.

http://mootools.net/shell/S53HG/2/

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces

To unsubscribe from this group, send email to mootools-users+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Bruno Daniel]

That's an impressive demo, Fábio. Bookmarked so I can study it later. Would love to see that in the Forge also.

[Oskar Krawczyk]

Very nice indeed, although the rotation() doesn't seem to do anything, even if I replace t.r with $random(0, 180);

[patcullen]

I tried some of the ideas presented in the replies, but didnt find
resolve. To try explain the problem a little clearer i created a new
shell example..
http://mootools.net/shell/HtauU/3/

The first two buttons illustrate tweening the css3 transform property,
but on only one 'dimension'. First button only tweens rotation, second
only does scaling.
Third button illustrates how Mootools conveniently allows me to:
setStyle('-moz-transform', 'rotate(50deg) scale(2)') which applies
both the rotation and the scaling to the element.
Fourth button illustrates how I cannot get this to work with tweening.
*** This is what Im trying to figure out.

The Element.setStyle in the shell example is copied from core to try
work some arounds, but it has not helped, infact when enabled, my
additions dont effect the element at all which confuses me even more.

Thanks for the help thus far.
// pat cullen

[fabiomcosta]

Got it.
I was talking to Valerio and he said its possible, and its easy
enough.
Just add this line of code:

Element.Styles.MozTransform = "rotate(@deg) scale(@)";

before you call your effects.
The working demo:

http://mootools.net/shell/HtauU/4/

Adding this property you can pass an array with 2 elements and it will
be applied correctly to your transform style, like this:

el.setStyle('MozTransform', [50, 2]);

Thats why the effect works.

On Mar 27, 9:12 am, patcullen <patrickmcul...@gmail.com> wrote:
> I tried some of the ideas presented in the replies, but didnt find
> resolve. To try explain the problem a little clearer i created a new

> shell example..http://mootools.net/shell/HtauU/3/

[patcullen]

Brilliant!! Makes a lot of sense now when I read Element.setStyle as
well. Thanks for your help Fabio and Valerio. Now I can get working on
improving this thing. Much appreciated.

// Pat Cullen

[Oskar Krawczyk]

Be sure to push it to GIT. I'd really like to see what you'll come up with.

[Bruno Daniel]

Some nice stuff can be acomplished with that... quick and dirty demo (webkit only for now): http://sandbox.vault7.com/playground/clock/

The relevant code:

var newStyles = new Hash({
    'webkitTransform': 'rotateX(@deg) skew(@deg)',
    'mozTransform': 'rotate(@deg) skew(@deg)'
});
$extend(Element.Styles, newStyles);

2010/3/27 Oskar Krawczyk <oskar.k...@gmail.com>

[patcullen]

@bruno. very cool.

On Mar 28, 9:22 am, Bruno Daniel <br...@vault7.com> wrote:
> Some nice stuff can be acomplished with that... quick and dirty demo (webkit
> only for now):http://sandbox.vault7.com/playground/clock/
> The relevant code:
>
> var newStyles = new Hash({
>     'webkitTransform': 'rotateX(@deg) skew(@deg)',
>     'mozTransform': 'rotate(@deg) skew(@deg)'});
>
> $extend(Element.Styles, newStyles);
>

> 2010/3/27 Oskar Krawczyk <oskar.krawc...@gmail.com>

[patcullen]

Have made my first plugin! Only took about 8 hours for me get a grasp
on Git and the forge, but I'm glad I've done it.
Forge: http://mootools.net/forge/p/windowpicker
An example giving a better idea of what I wanted to use it for:
http://pat.cullen.co.za/project/WindowPicker/Demo/

Thanks again for your help on this thread.

[Fábio M. Costa]

omg!!! awesome effect! Congratulations!

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces

To unsubscribe from this group, send email to mootools-users+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Bruno Daniel]

That's mind-blowing, patcullen...thanks for sharing.

2010/3/29 patcullen <patrick...@gmail.com>

[Ryan Florence]

Welcome to the, Web 3.0™