search

usablica / kissui.scrollanim

CSS3 scroll animation library
http://scrollanim.kissui.io/
MIT License
1.42k stars 131 forks source link

Animation position doesn't work #8

Closed jerepaajanen closed 8 years ago

jerepaajanen commented 8 years ago

I have tried "data-kui-position", but it doesn't seem to do a thing. Is there a way to animate element when it's at bottom of viewport, or just 10% visible, and not fully in view?

afshinm commented 8 years ago

Can you please share your code/jsfiddle?

jerepaajanen commented 8 years ago

This is what I have tried. There's no difference if I add "in", "out", or "bottom" in data-kui-position.

<div class="grid__column u-width-sm-auto" data-kui-anim="fadeInUp" data-kui-position="bottom">...</div>

afshinm commented 8 years ago

cool yeah you are using it correctly but can you please share a jsfiddle so I can inspect what the problem is?

jerepaajanen commented 8 years ago

I'm trying to use it here: http://rae.fi/client/netmedi/wordpress/kaikuhealth/cancer-care/for-patients/

afshinm commented 8 years ago

Cool, thanks @jerepaajanen. it seems like an issue, I will work on it and get back to you.

jerepaajanen commented 8 years ago

I tried the new version. Now API call for position work except "bottom" and "top". Position data-attributes doesn't seem to work.

afshinm commented 8 years ago

cool @jerepaajanen, I haven't added any options to define the trigger position using data-kui-position but I'm going to add this now. seems like a good feature!

afshinm commented 8 years ago

I meant, data-kui-anim only triggers when the element is in the viewport

afshinm commented 8 years ago

just added data-kui-event so you can define the event name as well. e.g.:

<div data-kui-anim="fadeIn" data-kui-event="top">
jerepaajanen commented 8 years ago

Thanks so much for this! Some questions and maybe something to consider for future updates: Is "bottom" same as "in", or are there any differences? Is there a way to show element when it's only half in viewport or "in" + some offset value in px?

afshinm commented 8 years ago

re bottom/in: yeah so basically bottom triggers when element.bottom == window.height and top triggers when element.top == 0.

re padding: kissui.position has this option (you can add a padding to trigger the event, e.g. top + 30px) but I haven't integrated it with the kissui.scrollanim. feel free to make a PR :)