Comments on: Mootools Transitions explained

By: Mario

Mario — Mon, 05 Sep 2011 20:51:53 +0000

Yes thanks, that was a typo, f(1)=1 as I wrote was correct, but the line above had an error.
And my example function is admittedly not the best one, that’s right.

By: Cheeso

Cheeso — Fri, 02 Sep 2011 20:40:05 +0000

in an update, you wrote: So generally speaking (and as nagaozen stated below) a transition function should start at (0,0) and end at (1,0).

This is not correct. It should end at (1,1). That is to say, f(1) = 1.

Also, your own custom transition function does not in fact follow this recommendation. When it is used, the result is visually confusing . You should normalize the fn to deliver f(1)=1. You simply need to use g(x)=(f(x)/f(1)) .

By: Mario

Mario — Sat, 13 Nov 2010 21:17:02 +0000

I’m not sure if I understand your question correctly… Is your question about moving an item with Drag or about moving an item with a transition (like the examples above)? You can also send a link to an example page or graphics.

mario

By: Avi

Avi — Sat, 13 Nov 2010 10:06:58 +0000

Hi I want to know can we move any element in cross direction rather than just left right.
Like we can drag element with any direction using Drag functionality, Can this be automated as we can change top and left..

Thanks
Avi

By: Mario

Mario — Tue, 02 Mar 2010 20:28:57 +0000

Hi -

good idea, thanks! Added a “reset all”-button to the “trigger all”-button (just above the bars).

By: Alexander

Alexander — Mon, 01 Mar 2010 18:18:48 +0000

Thanks for explanation and demo. It would be nice if there was a link to return elements to initial state (for transition comparing)

By: Mario

Mario — Fri, 19 Feb 2010 15:53:22 +0000

Sounds like some weird timing or cache problem (tried it here with empty cache and not being logged in – can’t reproduce). I’ll have a look later on.

[UPDATE] Seems this happens not only here: http://www.google.com/search?hl=en&rls=en&q=object+%22no+method%22+mootools&sa=N

By: Mario

Mario — Fri, 19 Feb 2010 15:38:38 +0000

Yes, that was of course informal pseudocode, correct would be g(x) = 1 – f(1-x). The is defined to be-operator := is also at the wrong place (to be really mathematically exact :).

Just thought about it.. but i’ve got no idea, why I used this := definition-operator — the last time I’ve used this must have been in PASCAL/MODULA-2 and that was some time ago :)

Anyway – thanks for the hint.

By: Regis

Regis — Fri, 19 Feb 2010 15:30:22 +0000

Yup. On first load, none of the examples work in Chrome Mac (5.0.307.1 dev). Reloading consistently fixes it.

On first load, JS Console says:
Uncaught TypeError: Object [object DOMWindow] has no method ‘addEvent’ — mootools-transitions-explained:106
Uncaught TypeError: Object [object DOMWindow] has no method ‘addEvent’ — mootools-transitions-explained:260

By: Arian

Arian — Fri, 19 Feb 2010 10:37:43 +0000

Very nice article!

One little note: you use the following notation:
f(x) := 1−f(1−x)

Mathematically this creates a kind of recursion, since you use the f(x) function to define the f(x) function.

Better would be:
g(x) := 1−f(1−x)

By: Mario

Mario — Fri, 19 Feb 2010 03:18:21 +0000

Chrome (Mac) does work here. Does the Javascript Console in Chrome show any errors?

By: acetonema

acetonema — Fri, 19 Feb 2010 03:13:41 +0000

For me, your examples don’t work in Chrome, but do work in Firefox. 2.18.10 Thanks for the detailed explanation!