Streaming live at 10am (PST)

Call Javascript as scroll action

Hi there,

I want to launch a javascript action

numAnim1.start();

when a Webflow Scroll Interaction is triggered. I could do that with jQuery, but I want to do it with the smallest possible amount of code.

If you need more information, let me know.

Thanks,
Marc

Hi @marc, Can you please update your post with some more information so we can help you faster? Things like a read-only link, designs, examples or screenshots help a lot.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

Unfortunately I cannot provide any Screenshots, but of course I can explain the case more.

I want to have a number counting up using https://inorganik.github.io/countUp.js/.
But when i make use of this function it starts counting onload and is already finished when the user reaches the section with the counting numbers. That’s why I want to launch it with the on scroll trigger of the section. I could use the following jQuery based code, but I want to make it leaner:

$(document).ready(function(){
 $(window).scroll(function(){
    if ($('#count1').isOnScreen()) {
        numAnim1.start();
    }
 });
});

Basically, I just want to use numAnim1.start() as a scroll into view effect.

I hope this helps to understand my problem.

Lets see if this works.

CALLING THE JAVASCRIPT NINJA!!! @bartekkustra

You guys are awesome… ;D


function isInView(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

$(document).ready(function() {
  $(window).scroll(function() {
    if(isInView('#count1')) {
      numAnim1.start();
    }
  });
});
2 Likes

Thanks Javascript Ninja @bartekkustra

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.