textillate and custom animations

[karland]

Hi, I have three questions. Hope someone can help.....

1. I would like to use jmpress together with jquery.textillate.js, especially when I have a bullet point lists and I want to have the bullets fly in and out in a 'textillate' way. My problem is that the textillate animation starts straight after loading the page and not after pressing the key to get a data-jmpress-element or even better using the data-duration-function.
2. The documentation on jmpress | Animation reads: "If you have cool animations created, you can contribute them to jmpress.js/src/css/animations/." Is it possible to include own animations, such as my-animation.css to be executed by the data-jmpress-Funktion? (I tried it, but it did not work! But also I could not find the place in the source animation.js, where this is prevented.)

Thanks a alot....

[sokra]

1. a bit difficult to combine textillate with jmpress animations: http://jsfiddle.net/xSxSR/
2. A animation is based on three css classes (.will-x, .do-x, .has-x) that are applied: http://jmpressjs.github.io/docs/animation.html See the included animations for examples:

.will-zoom {
    transition:         all 1s ease-in-out;
    opacity: 0;
    transform:         translate3d(0,0,1px) scale(10,10);
}

.do-zoom {
    opacity: 1;
    transform:         translate3d(0,0,1px) scale(1,1);
}

.has-zoom {
    transform:         none;
}

element will get the classes in these order:

• .will-x
• .will-x .do-x
• .will-x .do-x .has-x

[karland]

@sokra, many, many thanks.

to 1.) I really appreciate your effort. It perfectly works as desired. The only problem I have now is, your code seems to break the e.g. after 3s animation effect. Correct?

By the way: in this context can you confirm the behaviour with automated presentations independent of textillate.js. When I am putting data-duration="3000s" on a .step all the children data-jmpress-elements inherit "3000s" unless I specifiy an after 2s-effect or else. Correct?

to 2.) got it!

Cheers!

[sokra]

http://jsfiddle.net/xSxSR/1/

The duration plugin will not work correctly with animations. Even with a after 5s the duration plugin will call next after 3s :( You may have to use some custom code to ensure this.