Uncaught TypeError: afterCallback is not a function

[twister65]

• Operating System: Windows 10
• Browser Version: Chrome Version 68.0.3440.106
• ScrollReveal Version: 4.0.0

Uncaught TypeError: afterCallback is not a function
    at scrollreveal.js:876: 

function registerCallbacks(element, isDelayed) {
    var afterCallback = element.revealed
        ? element.config.afterReveal
        : element.config.afterReset;
    afterCallback(element.node); // <--???

[jlmakes]

Can you give more details about how you are using ScrollReveal?

[twister65]

https://github.com/twister65/joomspirit_99/blob/sr_v4/joomspirit_99/index.php line 219 : load and instantiate ScrollReveal. line 555 : use of ScrollReveal.

[twister65]

Sorry, for this issue, I load this library: https://github.com/scrollreveal/scrollreveal/blob/master/dist/scrollreveal.js

[jlmakes]

My goal @twister65, is to be able to reproduce this issue so I can effectively experiment with solutions. I put together a basic test, and the callbacks seem fine.

The only way I’ve reproduced this issue is by setting options.afterReveal to the wrong type, e.g:

ScrollReveal().reveal('.item', {
    afterReveal: {}
});

// => TypeError: afterCallback is not a function

I notice you’re passing the options using PHP, i.e:

sr.reveal('.social-links', { <?php echo $this->params->get('animation_social_text'); ?> });

My guess would be that something isn’t quite right in the value returned from PHP. I would double check what $this->params->get('animation_social_text'); (and other similar expressions) are returning.

[twister65]

I don't understand code line 876 in scrollreveal.js. Is afterCallback a function or a variable ?

[jlmakes]

afterCallback is indeed a variable, that points to one of two functions.

Do you mind posting the output from $this->params->get('animation_social_text'); for example?

[twister65]

<span class="text_social_icons hidden-phone" style="color:#555555; visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1.33s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1.33s cubic-bezier(0.5, 0, 0, 1) 0s;" data-sr-id="2">Suivez moi : </span>

[jlmakes]

Alors Nicolas, je peux essayer en français pour toi.

Je pense que le problème est le résultat du code PHP, pas du ScrollReveal. Quand tu as une ligne comme celui-ci:

$this->params->get('animation_social_text');

PHP le remplacera avec du texte non? Je devinerai un transformation en objet JavaScript, par exemple:

{ duration: 1300 }

Pouvez-vous mettre le vrai transformation pour moi? Je crois que ce chemin montrera le valeur incorrect avec options.afterReveal tu vois?

[twister65]

origin:'top', distance:'20px', duration:1330, reset:true

afterReset raises this error after scrolling back the window. afterReset:baffleSelection('.text_social_icons')

[jlmakes]

seems like baffleSelection('.text_social_icons') is not a function.

[twister65]

function baffleSelection($e) {
    let b = baffle($e);
    b.start().set({ speed: 40 }).reveal(3000, 1500);
}

[jlmakes]

You are invoking the function baffleSelection() instead of assigning it. That means the return value will be used for options.afterResetinstead of the function itself.

Donc pas comme ceci:

sr.reveal('.text_social_icons', {
  <?php echo $this->params->get('animation_social_text'); ?>, 
  afterReset: baffleSelection('.text_social_icons')
});

Fait cela:

sr.reveal('.text_social_icons', {
  <?php echo $this->params->get('animation_social_text'); ?>, 
  afterReset: function() {
    baffleSelection('.text_social_icons');
  }
});