AOS (Animate On Scroll) Library Not Working in D2L - why?

Brock.Parks96

Hi; I’m trying to use the AOS library (Animate On Scroll) on webpages in our courses. This library allows elements on the page to animate (fade in, slide in, etc) using CSS *when the user scrolls to see them.* So, they won’t animate until the user scrolls past them. Here is the library on GitHub: https://github.com/michalsnik/aos/tree/v2#-animations I’ve downloaded examples, and they work offline, or on the web, but when I take those same examples and put them in Brightspace, the animations play on page load, rather than when the user scrolls to see them.  Here is an example that has failed to work when loaded into D2L: https://codepen.io/oltika/pen/vXdJbx I’m not a programmer. Does anyone know why this happens, or what I can do to fix it? Thanks,Brock 

Chris.Bellini64

Hi Brock!

 

Are there any errors visible in the browser console? To bring up the browser console (e.g in Chrome) press F12 to display the developer tools, reload your testing page in Brightspace and look to the console for any output:

 

Bruce.Burghgraef48

Hi Brock - after chatting with some internal colleagues - they provided a bit more information on this inquiry. Content topics are displayed in an iFrame in Brightspace. Animations can't be triggered as the page in the iFrame is displayed at full height and the scrollbar is at the top level parent page. The issue is that an HTML page for the the topic is displayed at it's full height in the iFrame.

 

Hope that helps!

Kind regards, Bruce

 

Brock.Parks96

Nice tip! I'll take a look and will let you know - thanks for the suggestion!

Brock.Parks96

Fantastic! I suspected something to this effect, but have read a few workarounds on Stack Overflow. I will investigate and follow up if I have any additional comments or solutions.

 

Thanks!

Arman.Vinck25

@Brock Parks​ Dear Brock,

 

Did you find a work-around to trigger AOS in the D2L Brightspace environment?

 

Kind regards,

Arman

Jennifer.Wagner24

@Brock Parks​ @Arman Vinck​ Try using find & replace in the JavaScript file to change window.AddEventListener to window.parent.AddEventListener (4 occurrences), window.pageYOffset to window.parent.pageYOffset (1 occurrence), and window.innerHeight to window.parent.innerHeight (2 occurrences).

 

I'm still using the CSS from the CDN, but uploaded my own JS file and it appears to be working for me within D2L. I tried it in Safari, Edge, Chrome and Firefox, as well as in the Pulse app on my Android phone. Firefox on PC is the only one that didn't do the animation when the object was in the viewport on page load. But all of the others appeared to be working.

 

Here's a (somewhat choppy) gif of me scrolling down the page in my test course:

Brock.Parks96

Thanks, Jennifer! We will try this over the next few days and will let you know what we experience - looks great!

Brock.Parks96

@Arman Vinck​ Thanks for the prompt, Arman - we never found a solution and since it wasn't a dealbreaker, we hadn't circled back - I will update here in the next few days once I also try out Jennifer's solution...