Repeater filters using css animations

rp-7
#1

Hello Friends,
I have created repeater filters using css animations. Demo
I hope this animation filter will be useful for all Newbies.
Note: we can use multiple animations
javascript:void($(‘div[data-label=“g”]’).addClass(‘animated addyouranimation’));

Your animation list:
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Thanks,
Vikram
repeater_filter.rp (64.4 KB)

#2

Hey Vikram,

Been gone from the forums some time, but just came across this thread. Nicely done!

I didn’t realize you can pass a repeater column name as the value for a DP’s state. That make is so much easier. Also pretty neat how you assign to the state <div> custom keyframe animations via Animate.css.

I wonder if similar code injection (Open link in) can be done with JS libraries such as: Velocity.js, GreenSock | GSAP, or AniJS, A Library to Raise your Web Design without Coding

light_forger

#3

nice demo. Is there a way to assign color to the rectangle via jquery instead of having 4 different DPs?

#4

Hey Arhcer,

Good to “see” you!

In the past I have tried doing exactly this by using .css(“background-color”:“red”); but it didn’t work. It is because widgets in Axure upon generating/previewing the prototype get rendered as .pngs. Interestingly enough, however, you can still change the color of the text using the same method.

I wonder if Vikram has had a different experience with this. I would imagine you can manually insert code to create a new DP since they are essentially <div>s but that seems to be too much of an effort for the end result.

light_forger

#5

Hi light_forger,

Thanks for your feedback and sorry for the delay reply.
We can inject scripts and css without JS libraries and axshare plugins.

I have created demo for you using anijs.

Just copy the below code and paste it.

Insert Js and css:

javascript:var jsurl_one = document.createElement(‘script’);
jsurl_one.setAttribute(“type”, “text/javascript”);
jsurl_one.setAttribute(“src”, “http://anijs.github.io/lib/anijs/anijs-min.js”);
var head = document.getElementsByTagName(‘head’)[0];
head.appendChild(jsurl_one);

var jsurl_two = document.createElement(‘script’);
jsurl_two.setAttribute(“type”, “text/javascript”);
jsurl_two.setAttribute(“src”, “http://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js”);
var head = document.getElementsByTagName(‘head’)[0];
head.appendChild(jsurl_two);

$(‘head’).append(’<link rel=“stylesheet” href=“http://daneden.github.io/animate.css/animate.min.css” type=“text/css” />’);

Triggering Events:

OnMouseEnter: we need to add attribute and add class.

javascript:$("[data-label=‘box_1’]").attr(“data-anijs”,“if: mouseover, do: swing animated”).addClass(‘swing animated’);

OnMouseOut: we need to remove class

javascript:$("[data-label=‘box_1’]").removeClass(‘swing animated’);

OnClick event(For button):
javascript:$("[data-label=‘box_1’]").attr(“data-anijs”,“if:click, do: hinge animated, to: [data-label=‘box_1’]”).addClass(‘swing animated’);

Please check the attached RP file. I hope it will be useful for you.

Thanks,
Vikram
animation_with_anijs.rp (59.1 KB)

#6

We can set background color for widgets. But we need to set your widget fill color is transparent.
javascript:$(’[data-label=“yourname”]’).css(‘background-color’,‘green’);
It is really tricky to use in repeater. So, the best way to use dynamic panel.

Thanks,
Vikram

#7

Hmmm, that’s a good point about the transparency. I thought that even with that in place, it would render it as non-modifiable PNG. Good tip to know, Vikram!

#8

Vikram, I tried your approach but could not get the transparency to turn a solid color via CSS even after following identical syntax. Do you have a working example you can share?

Also, I am guessing this approach should work on shapes in general and also on shapes within DPs, but let me know if I am wrong in that assumption. Thanks in advance!

light_forger

#9

Hi light_forger,
Please check the attached RP file. Did you check the above post for anijs animation?
I have created an animation using external js and css (anijs) for you.
Thanks,
Vikram
bg_color_for_widget.rp (52.9 KB)

#10

Hey Vikram,

Yes, I checked out the Animate.css file. Been dissecting the .css in the past few days :slight_smile: It is well organized as a modular way of assigning animations.

Thanks for the .rp. You have this in your file:
javascript:$(’[data-label=“box”]’).css(‘background-color’,‘green’);

In my copy I have:
javascript:void($(’[data-label=“box”]’).css("background-color","green"));

and that didn’t work. Exact same setup for the widget. Very strange!

Furthermore, I got this to work with your example in Safari and Chrome, but not Firefox. Firefox returns [object Object].

light_forger

#11

It is working for me in Firefox.
javascript:void($(’[data-label=“box”]’).css(“background-color”,“green”));

Furthermore, I am using Windows 7.

Did you check the below thread?
Repeater filters using css animations

Thanks,
Vikram

#12

I wonder if it is some of my ad blocking plugins preventing it from working. Will test it out with those turned off and updating the browser to the latest version. I am also on Windows 7. Will report if I see a change in the behavior.

Yea, I checked out the link. Good job on the animations!

light_forger

#13

Hi strelec,
I have created repeater filters without dynamic panel using css animations for you.
Please check and let me know if any feedback.
Demo: Untitled Document

Javascript:

javascript:
$(’[data-label=“box”]’).each(function () {
var text_val = $(this);
var text = text_val.text();
text_val.css(‘background-color’, text);
text_val.attr(“name”,text);
text_val.addClass(‘animated zoomIn’);
});

Note: I have set the background color dynamically.

I hope it will be useful for you.
Thanks,
Vikram
repeater_filter_without_DynamicPanel.rp (61 KB)

#14

nice job! i was trying to optimize it a little by using variables, but it doesn’t work. Not sure if it’s syntax or it’s just not how things are done in js. I’d appreciate if you can take a look. (see green and blue filters). Thanks
repeater_filter_without_DynamicPanel_testing.rp (67.3 KB)

#15

Hi strelec,
Thanks so much for your feedback. I am using JavaScript only (not syntax).
I have tested lots of time during my development.
When we are trying to remove or add filters, background color will reset again. Therefore, I have set background color and add an animation class on each click event.

I will try to create using your method whenever I will get free time.
Thanks,
Vikram

#16

Thank you! Exactly what I’m looking for!

unlisted #17
closed #18