IDEA: Hide elements that scroll out of view.

[catdadcode]

In some cases I think it would be really cool to be able to tell wow to hide elements that scroll out of view. Maybe a separate class name like wow-hide or something like that. I have a good example on a page I maintain for a non-profit organization called Paw Project.

http://pawproject.org/faq

The FAQ page animates elements in as you scroll. It would be cool if as soon as the elements scroll out of view they hide themselves and then trigger again when you scroll back up. It would create a really neat effect.

What do you guys think? If you like the idea I may try to implement it.

[mandeldl]

+1. Even just a way to 'toggle' the animation as an object leaves/re-enters the window.

[uraimo]

+1, but i'd prefer an option that simply rewind the selected animation to replay it later once the elements are visible again (i've seen this done with other libraries and it looks appropriate in many situations).

[matthieua]

This would be great but I don't think it'd be doable since animations are controlled by CSS. Rewinding them in JavaScript does sound quite right. Does it?

[uraimo]

@matthieua what if we apply the opposite animate.css class(when available) to the element once is no more visible? Something like this with fadeIn/fadeOut: http://codepen.io/anon/pen/JojOdK

I'm looking at the generated wow.js and looks like a bit tricky to implement however, also i don't know how this could be made an optional behaviour in a clean way.

[matthieua]

yeah I get you. we could have data-wow-hide="fadeOut" which would be pretty cool indeed. Hmm not sure if this would work in every case though. It might actually confuse people. If someone wants to submit a pull request, I'll be happy to review it but I can't promise it'll get merged in unless it plays nicely with animate.css.

[catdadcode]

By "rewind" do you mean doing a reverse animation to hide it? I don't know what you mean. I'm basically saying that the animate class should be removed as the element scrolls out of view, then added again when it scrolls into view. What wow is doing currently is adding the animate class to the element only once, then it's visible forever after that. With this hypothetical option set, the animate class would be removed and the element returned to a hidden state, so that the animation will replay once in view again.

[catdadcode]

Oh I see in the codepen, you want it to fade out on a timer? I think that's a totally separate option than what I'm asking for. I just want the animation to reset once scrolled out of view, not hide already visible elements in view after a timeout.

[uraimo]

@chevex that was just a crappy example that applied the opposite animation replacing the old one in js after a while, to sort of reverse the original animation, that setTimeout was intended as "scroll out of view" :smiley:

I think it would be cool to be able to do both things via configuration, to simply remove/reapply the animated class to be able to repeat the animation once an element becomes visible again (reset on hide) and also to be able to initiate the opposite animation when an element goes out of view (run opposite on hide, it looks better for fade animations). In both cases the original animation should be played again when the element becomes visible.

[matthieua]

Yes, that totally makes sense guys! Should it be a general option and specific one for each element? Anyone up for giving it a try?

[gsinovsky]

I would very much like to see this feature implemented!

[h3nrik]

:+1: good idea; from my pov it would be sufficient to have a general option (with default value 'false')... just my 2 european cents though.

[VerySoong]

:heavy_plus_sign: :one: It will be great to have this :metal:

Ideally is to have the animation options to hide/fade/slide out the elements in opposite directions when they are out of view. Otherwise, a simple fade out (like setting a default) for all wow animation is :thumbsup: too

[nunnsy]

Great idea :+1: as animate.css already has the functions built in, just need a way of triggering them, perhaps with an offset of its own so the user can see it fade away?

[alexandesigner]

+1. Good guys, I believe it would be great to have this implemented in reality, would act as the ' reset ' property of the plugin (scrollReveal.js).

< div date-sr = "enter bottom and scale up 20% over 2s reset" > Foo

[paulunstech]

This is something I've been trying to crack for some time, but I have not been able to find an answer, since I am not a programmer or an extensive coder...

I have experience with Superscrollorama, http://johnpolacek.github.io/superscrollorama/, which is awesome, it uses Greensock animation, but it's very time consuming and heavy. WOW is just simple and easy... so.... PLEASE - how can this feature be added?!? I am sure it cannot be TOO difficult, for an expert coder!

If this was part of WOW, I'd be using it on every site I design. Period. Glad to see it is now a conversation!

[barrylachapelle]

I +1 this heavily and completely agree with @paulunstech I just spent a bit trying to removing classes with a callback. I think it might take a lot more than this though. WOW would need to have an offsettop param.

Mathieu this addition would blow WOW right up.

[sheadawson]

+1. That is all :D

[jamielovelace]

much +1, very yes

[titos2k]

+1

[abukwaik]

+1 too really cool idea!

[FredSarmento]

+1

[der-krueger]

+1

[yosemite-windows]

Yes an option to rewind any animation set by animate.css would be wonderful !

[RadianSmile]

+1

[atomgroom]

I did this here, without Wow.js. It would be cool to integrate something similar. https://github.com/atomgroomdesign/icon-exit-animations

[iamsmae]

I have been looking for a way to do this! I hope it gets added soon!

I am not a programmer, but I am wondering if this would work if added?

https://github.com/morr/jquery.appear

[JoshCarey]

I'll throw my hat in and also say that this would be an awesome feature. I'm definitely no programmer, but I could probably spend way too much time getting this functionality to work with something like waypoints.js - https://github.com/imakewebthings/waypoints - or something similar. Wow.js is just so clean and simple, I'd greatly prefer to use it everywhere for this type of stuff. I'm definitely sad to see this still hasn't been figured out after all the time in the thread.

I think having the an explanation in the documentation say something to the tune of "if you want to reverse your animation when the element is scrolled out of view, add xxx-data-attribute= "opposite-animate.css-animation".

[kat2014]

+1

I too am looking for this type of solution with wow. Currently i am using classie.js but I have to manually determine and reset shrinkOn value off the page distance scrolled each time i add or remove elements to my html which is becoming impossible to manage. I woudl love to transition to using wow, as it seems to be a really nice and simple solution otherwise.

[redesigned]

+1 I'd even just settle for resetting the element when it leaves the page and re-revealing it when it re-enters the page. Which should be fairly simple, right?

[jscontrust]

+1

[sahibvirk]

+1000

[graingert]

Pull requests accepted on https://github.com/graingert/wow the official https://wow.js.org source

[AntoineFacq]

+1 :-)