Call Javascript as scroll action

Design help General
1

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

2

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 - General - Forum | Webflow

Thanks in advance! :slight_smile:

3

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

I want to have a number counting up using 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.

4

Lets see if this works.

CALLING THE JAVASCRIPT NINJA!!! @bartekkustra

5

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
6

Thanks Javascript Ninja @bartekkustra

1 Like
7

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