Adapt Learning Community: Scroll-based animation/interation

I'm about to start putting together a theme for a new course I'm working on, and I'm thinking of trying to build in some basic parallax/scrolling animation effects. (Eg learner scrolls down to a block and when they do so the images/text slides in.)

I've seen a few things like this in a few demos in the showcase -- e.g. in a couple of the Kineo demos -- and I wondered if anyone had any experience of doing this, or suggestions for how best to approach. A couple of thoughts were:

- Has anyone had any success integrating a library like scrollmagic (or one of the many others) with Adapt?

- If I wanted to use something like animate.css to animate the display of content within a block when a user scrolls-to/views that block, is there a particular event/action that could be readily linked with within the framework? Would I be advised to use Trickle, to be able to trigger the event?

parallax is difficult: be prepared for some pain

Show parent | Reply

i've not used scrollmagic before, i'm afraid i'm useless to you in that regard.

https://github.com/cgkineo/adapt-component-animate < this might be a good place to start

Show parent | Reply

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.

Show parent | Reply

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!

Show parent | Reply

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.

Show parent | Reply

Hello,

yes, parallax is very hard to implement, especially across multiple devices.

The plugin Olli Foster described, allows you to do this sort of animations when a learner scrolls a component into view. The plugin uses Javascript Animations, so you can not use animate.css.

The Library that checks if an element is in the Viewport is this one --> https://github.com/adaptlearning/jquery.onscreen

I suggest that we update the Framework so that a css class is added once a component/block/article is onScreen/offScreen. This would make it easy to use css based animations. For performance reason, the adding of the classes should be disabled by default.

Regards

Thomas

Show parent | Reply