Scroll Reveal is not a function

[springbokhop]

Can’t get Scroll Reveal JS working within Sage 9.

I’ve imported the file into common.js bit when I try and use it I get ''Uncaught TypeError: ScrollReveal is not a function" showing in the console.

This is what my common.js looks like:

import 'scrollreveal/dist/scrollreveal.min';
export default {
  init() {
    // JavaScript to be fired on all pages
    $('.hamburger').click(function() {
      $(this).toggleClass('is-active');
      $('.menu-block').toggleClass('visible');
    });
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
    const ScrollReveal = require('scrollreveal');
    ScrollReveal().reveal('.cta__subheader');
    ScrollReveal().reveal('.cta__button');
  },
};

[alwaysblank]

Have you tried importing the library as recommended in the library’s documentation?

import ScrollReveal from 'scrollreveal'

[springbokhop]

That’s solved it, thanks!

I aslo had to remove the constant declaration for ScrollReveal and run the functions when the page has fully loaded.

import ScrollReveal from 'scrollreveal'

export default {
  init() {
// JavaScript to be fired on all pages
$('.hamburger').click(function() {
  $(this).toggleClass('is-active');
  $('.menu-block').toggleClass('visible');
});
  },
  finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
$(window).load(function() {
  ScrollReveal().reveal('.cta__subheader');
  ScrollReveal().reveal('.cta__button');
});
  },
};