WOW
WOW copied to clipboard
matthieua
Use with any scrollable div
It seems like the code only takes into account a scrollable window. Could we use this on any scrollable div container? Like focusing only on elements inside <div id="myDiv"></div> and make them animate?
I guess we could, with any block-level element that has overflow: scroll. It shouldn't be very hard to implement, although I'm not very excited about it :)
Found a sneaky workaround based upon https://github.com/matthieua/WOW/issues/162#issuecomment-78337643
In combination with https://github.com/zeusdeux/isInViewport the suggestion in that comment can be slightly modified to enable scrollable divs to operate in the same manner as a scrollable window (at least for basic config)
Install the plugin, or roll your own inViewport element detection mechanism, then do something like this:
var scrollable = $('#your-scrollable-div');
scrollable.on('scroll.wow', function(){
scrollable.find('.wow:not(.animated):in-viewport').removeAttr('style').addClass('animated');
});
Works perfect for animations contained in a scrollable div for me
I tried that solution but why I got this error from console? the "function is not defined" at 'scroll.wow', function() line
@drhouse7 do you have both jQuery and the isInViewport plugin installed? Also did you change 'your-scrollable-div' to match the id of your scrolling div?
@pojka Finally it works! Instead of add the script to the header, I inserted it directly in my view and now wow.js works on my scrollable section. You are awesome Pojka, thanks for this workaround...the only problem now is that each single row of items are displayed at once when in viewport, there is no delay (from left to right with this code data-wow-delay="<?php echo $delay; ?>s").
My man @pojka you rock. You save me big time on doing a lot of research and changing everything. I salute you almost 1 year after your workaround.
It seems to be supported now:
new WOW({
scrollContainer: '.scroll'
}).init();
ScrollContainer is not working with md-content from angular. things remains hidden...
Does this actually officially work now or still no?
new WOW({ scrollContainer: '.scroll' }).init();
I have tried it and can't get it to work. I have a center column div set to scroll and I cannot for the life of me get the animations to work (unless I stretch the bottom of the browser window)
If you want to add wow animation in scrollOverflow div of fullpage.js then you can try onLeave or afterLoad event
Example:
onLeave:function(index){ // index: get slide index if(index.index == 1){ var scrollable = $(".about_container .fp-overflow"); // your custom class or id scrollable.find('.wow:not(.animated)').removeAttr('style').addClass('animated'); scrollable.find('.wow.animated').css({'animation-duration': '1.5s'}) } };
Thank me later :)
