FR: apply delay sequence to multiple items visible in the viewport

[qgates]

Say I apply wow fadeIn to a bunch of graphics on a page. They appear nicely one by one as I scroll slowly down. But say those graphics are all in the viewport, either at pageload or if some code has jumped to an anchor position; I'd like to be able to apply a configurable delay to each item when multiple items are being animated by wow.

I'm aware of data-wow-delay etc., but the behaviour I'm looking for is different. I only want delay applied to successive items that are being rendered in the viewport concurrently. So for example if it was 0.1s and 5 items are all going to be displayed concurrently, the topmost item has no delay, the 2nd 0.1s and the last 0.4s, having the appearance of rippling down the page (nice). If I'm scrolling to reveal them one by one, none of them has any delay and they fade in as they appear as normal, without delay.

Using data-wow-delay set to 0.4s on the last item means that when it is scrolled into view, assuming the others are already in view, there's a long (0.4s) pause before it appears - which, out of context of other animations, looks wrong.

I'd be up for hacking this myself, and though I could hack wow.js I'm not so comfortable with coffee and it would make more sense in the original source.

[attilaolah]

If you can make this work by editing the JS (and it looks reasonable), send a PR and I'll backport that to CoffeeScript. I like the idea, maybe others would find it useful too.

[qgates]

Yes, I thought this would be a really cool feature. On a lot of the sites and systems I've put these delays in by hand, using data-wow-delay (and formerly using CSS classes .delayX with animate.css) to enhance the aesthetic of in-view gfx appearing. But since things have gone more responsive it's hard to know how many gfx will appear on a given viewport, and some of the later delays can look clumsy when they're not in sequence with other visible gfx.

Having a simple setting, say wow-sequence-delay: 0.1s which tells wow that any concurrent animations on the viewport should be delayed by that time in sequence. So if 10 gfx appear on the viewport, the (eg) fadeIn is delayed by 0.1s for each gfx in turn. But on a narrow viewport, where only 2 are visible, those 2 are sequenced but the rest appear without delay as the user scrolls down. The feature could be expanded over time to define 'sequence groups' as CSS classes as well, so that some gfx observe the sequence delay but some don't (as appropriate).

When I have time I might just take a look at hacking the coffee. Coffeescript looks neat, especially the brevity it brings for OO, just didn't get around to playing with it yet!

[attilaolah]

Having a simple setting, say wow-sequence-delay: 0.1s which tells wow that any concurrent animations on the viewport should be delayed by that time in sequence.

Yeah, I was thinking something like that too. Just default it to zero, then we stay backwards-compatible.

[qgates]

Exactly. By the way, if you look at the test page I posted for issue #175 in the 'more information' post, the section under 'Mobile components' demonstrates the kind of behaviour I'd like to see automated. Presently it's being done manually with data-wow-delay attributes.

[owarigit]

Great suggestion, I'd find this useful since I have a little issue in responsive layout. For example in desktop version I have 5 elements in one row with sequence animation (different data wow delay per item). But when I change them into mobile resolution, the delay will still be applied when every element take one row each. so the most bottom item has the longest delay.

[key60529]

is this still working on? since the last reply is from 2015, and I found this issue on small screen when I'm using delay to the items that on the same sequence...

[ghmorais]

would also love to know if there is any progress related to this

[kaleem7832]

is wow-sequence-delay implemented?

[studiolxv]

I like showing up fashionably late to the party. I know there may be plenty of better ways to do this but this is my first take:

For each '.wow' element add the 'data-wow-delay' attribute and increment the delay value by .5 dynamically. function addWowDelay() { $('.wow').each(function(i) { d = i * 0.5 / 10; $(this).attr('data-wow-delay', d + "s"); }); } addWowDelay();