Streaming live at 10am (PST)

Call Javascript as scroll action


#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


What is wrong with on scroll functions?
Call Javascript on webflow slide change
#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: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! 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 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.


#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();
    }
  });
});

Need help with adding a Number Count Up Animation On Scroll
#6

Thanks Javascript Ninja @bartekkustra


#7

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