Picture of Oliver Foster
Re: Scroll-based animation/interation
by Oliver Foster - Tuesday, 14 June 2016, 9:25 AM
 

which devices and browsers are you targeting? 

ios is notorious for disabling javascript events whilst a scroll is occuring, and css isn't scroll aware (yet). we always have issues doing anything scroll related on any ios device.

Picture of Gareth Walker
Re: Scroll-based animation/interation
by Gareth Walker - Tuesday, 14 June 2016, 3:05 PM
 

Thanks for the information and the pointer to the Github project. (I did stumble on that this morning and wondered whether it was still current?)

My project is workplace training within a VLE/LMS, so the core devices will probably be a pretty standard range of PC and Apple desktop or laptop devices, with recent IE, Safari or Chrome as the standard . But I can't rule out that a section of the audience will be using various tablets, including iOS - so I'd need to make sure that if things fail they do so reasonably gracefully.

For this reason, to begin with my ambitions are pretty modest. I'd like to be able to fade in an image and/or slide in a bit of a text when a learner arrives at a given component - but it wouldn't be a big issue if this didn't happen and the content just displayed.

To achieve this, I'd thought about using animate.css for the styles and trying to incorporate something like wow.js (http://mynameismatthieu.com/WOW/) to link that to the scroll - then just adding some custom classes within adapt.

I was wondering whether this would be likely to play nicely with the framework, or if I'd find myself needing to get deeper into its javascript for this to work - where I'd be very quickly out of me depth! And I guess the existence of plugins like the Kineo background switcher were nudging me to think this could be a bit more complex than it might seem!

 

Picture of Gareth Walker
Re: Scroll-based animation/interation
by Gareth Walker - Tuesday, 14 June 2016, 3:35 PM
 

Actually, my mistake: the think I'd been looking at on github was https://github.com/oliverfoster/adapt-animate. Hadn't seen the one you pointed to.