Animation with 66 effects

rp-7
#1

Hi All,
I have created animation using 66 effects. Please check the demoand give me some feedback.

I hope it will be useful for all.
Thanks and Regard,
Vikram

#2

That’s a really good library. I think the only thing I would (personally) change is to combine the rotate in/out with zoom at the same time.

Regardless of that though, awesome work Vikram.

#3

Thank you very much for your feedback. Now i am trying to implement animation using different scenarios in axure.
I will post my rp file very shortly.

#4

Awesome work indeed! Looking forward to dissecting the .rp :slight_smile:

I am curious to which JS framework you used…

#5

Hi All,
I have created multiple animation effects run on single click.
Please check the below thread.
One click executes multiple animation effects

#6

Hi All,
I have created multiple animation effects run on single click.
Please check the below thread.
One click executes multiple animation effects

#7

Hi All,
Here i have posted two types of rp file.(select and multi select).

Animation with 66 effects(Single selection):

Create a plug-in in AxShare and select End of the Head.
Just insert a below codes

<link rel=“stylesheet” href=“http://daneden.github.io/animate.css/animate.min.css” />
<script type=“text/javascript”>
function testAnim(x) {
$(‘div[data-label=“anim_box”]’).removeClass().addClass(x + ’ animated’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function () {
$(this).removeClass();
});
};

$(document).ready(function () {
    $('input[value="Animate"]').click(function (e) {
        e.preventDefault();
        var anim = $('div[data-label="anim_opt"] select').val();
        testAnim(anim);
    });

    $('div[data-label="anim_opt"] select').change(function () {
        var anim = $(this).val();
        testAnim(anim);
    });
});

</script>

One click executes multiple animation effects:

Create a plug-in in AxShare and select End of the Head.
Just insert a below codes.

<link rel=“stylesheet” href=“http://daneden.github.io/animate.css/animate.min.css” />
<script type=“text/javascript”>
$(document).ready(function () {
function testAnim(x) {
$(‘div[data-label=“anim_box”]’).removeClass().addClass(x + ’ animated’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function () {
$(this).removeClass();
});
};
var res;
var i = 0;
$(‘input[value=“Animate”]’).click(function (e) {

            res = "";
            i = 0;
            e.preventDefault();

            var anim = $('div[data-label="anim_opt"] select').val().toString();
            res = anim.split(",");
            var myVar = setInterval(function () { setTimeoutTest() }, 1200);
        });
        function setTimeoutTest() {
            testAnim(res[i]);
            i = parseInt(i) + 1;
        }
    });
    &lt;/script&gt;

Thanks
animate_multiple_rnd.rp (56.9 KB)

animate_single_rnd .rp (56.4 KB)

#8

great job. very helpful.
I would add a little wait time at the end of each one

#9

Thanks for your feedback

#10

Hello Vikram and thank you for your awesome work.

I’ve managed to add the plugin to test the transitions from a local rp file (the one you’ve just shared).

Still, i’m unclear on how i can use them (the animation). Am i supposed to find them when i want to add an interaction in Axure ?

Thank you for your answer,

Cheers,

#11

Ok don’t worry about it. I’ve managed to re-use it :slight_smile:

Thanks

#12

Hi!!

I have the same problem, I don’t know how to use this in my own files. What I’d like to do is to have an impor animation (import orders in an ecommerce for instance), so when the import ends up, it automatically fades out with a bounce out effect. Is it possible?

Thanks in advances, and congratulations for your work Vikram!!. It’s just awesome.

#13

Hi DavidSp,
Thanks once again for your feedback!
I have created multiple animation effects run on page load event.
Please check the demohere.

Note:
Open the attached RP file and select the what are types of animation do you want and set hidden (for example, I have set hidden for animation button).

Create a plug-in in AxShare and select End of the Head.
Just insert a below code.
<link rel=“stylesheet” href=“http://daneden.github.io/animate.css/animate.min.css” />
<script type=“text/javascript”>
$(document).ready(function () {
function testAnim(x) {
$(‘div[data-label=“anim_box”]’).removeClass().addClass(x + ’ animated’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function () {
$(this).removeClass();
});
};
$(function () {
$(‘input[value=“Animate”]’).click();
});
var res;
var i = 0;
$(‘input[value=“Animate”]’).click(function (e) {
alert(onpage load animation test);
res = “”;
i = 0;
e.preventDefault();

            var anim = $('div[data-label="anim_opt"] select').val().toString();
            res = anim.split(",");
            var myVar = setInterval(function () { setTimeoutTest() }, 1200);
        });
        function setTimeoutTest() {
            testAnim(res[i]);
            i = parseInt(i) + 1;
        }
    });

</script>

Thanks,
Vikram
animate_pageload_rnd.rp (56.7 KB)

#14

[QUOTE=Sacha V;42171]Ok don’t worry about it. I’ve managed to re-use it :slight_smile:

Thanks[/QUOTE]

Hi Sacha,

You mind sharing your RP file to see how you did it?

Here’s mine:
Untitled Document

Attached is the RP file.

I’ve already done the plugin but now I’m trying to animate the checkmark. Animate=pulse

Feel free to chime in too @Vikramadhithan

Thanks!
animate_single_rnd_VT.rp (75.8 KB)

#15

This is fantastic!! Thank you for sharing!

#16

Has anyone been able to use and view these recently?

#17

It doesn’t work for me. Axure made a change to default projects to HTTPS and the file location referenced for the stylesheet is http:// so the request is blocked. If you were to follow the instructions and reference HTTPS I think it would work, although since this is post is from a while back the files are Axure 7 files.

#18

Note: Have to replace below line.

Thanks,
Vikam

unlisted #19
closed #20