Highlighted

Launch animation on scroll

Community Beginner ,
Apr 07, 2018

Copy link to clipboard

Copied

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

Views

135

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Launch animation on scroll

Community Beginner ,
Apr 07, 2018

Copy link to clipboard

Copied

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

Views

136

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 07, 2018 0
New Here ,
Oct 12, 2020

Copy link to clipboard

Copied

Hello,

 

did you find a solution ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0