Skip to main content
patrickb89495570
Known Participant
April 7, 2018
Question

Launch animation on scroll

  • April 7, 2018
  • 2 replies
  • 564 views

Hello Guys,

I need your help if you have time

Based on answer in the animate CC forum

i'm trying to launch animate on scroll, the thing is that i am in an iframe in wordpress (Avada Theme)

I tried this code :

var px_to_mc = 100;

var scroll_function = scrollF.bind(this);

window.addEventListener("scroll", scroll_function);

function scrollF(){

var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;

if(scrollTop>px_to_mc){

window.removeEventListener("scroll", scroll_function);

this.mc.play();

}

}

But it only work on scroll not in an iframe

or this one :

// stop main timeline

        this.stop();

        // check timeout handle

        var chkTimer;

        var inview = false;

        // only check visibility when scrolling has stopped

        function scheduleVisCheck() {

            clearTimeout(chkTimer);

            chkTimer = setTimeout(checkCanvasVis, 250);

        }

        // play main timeline when canvas has scrolled (vertically) into view

        function checkCanvasVis() {

            var rect = canvas.getBoundingClientRect();

           if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) -150 || (rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.bottom > 150)   ) {

            if (inview == false) exportRoot.play(0);

            inview = true;

            } else {

                inview = false;

            }

        }

        // hook event listener to window scrolling

        window.addEventListener("scroll", scheduleVisCheck);

        // just in case canvas starts already visible

        checkCanvasVis();

But it don’t work in chrome

Your help would be wonderful

Thx a lot

patrickbellair@gmail.com

    This topic has been closed for replies.

    2 replies

    Stephan Widmer
    Participant
    October 18, 2021

    Hi,

    this code is great, but only works in Safari.

    If there is a solution, that works on Firefox and Chrome as well, let me know.

    Participating Frequently
    October 12, 2020

    Hello,

     

    did you find a solution ?