Highlighted

Launch animate cc movie when scroll

Explorer ,
Nov 29, 2017

Copy link to clipboard

Copied

Hey guys,

I have an animate cc (so a canvas) movie in a page but I have a lot of content before and the animation doesn't show directly in the viewport, we must scroll to see it. I would like my animation to launch ONLY when I scrool and when it appears on the page.

Can someone help me please? I could do it in the past with Edge animate but never found any documentation about that script in animate cc..

Thanks a lot !

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

}

}

Views

845

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 animate cc movie when scroll

Explorer ,
Nov 29, 2017

Copy link to clipboard

Copied

Hey guys,

I have an animate cc (so a canvas) movie in a page but I have a lot of content before and the animation doesn't show directly in the viewport, we must scroll to see it. I would like my animation to launch ONLY when I scrool and when it appears on the page.

Can someone help me please? I could do it in the past with Edge animate but never found any documentation about that script in animate cc..

Thanks a lot !

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

}

}

Views

846

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
Nov 29, 2017 0
Adobe Community Professional ,
Nov 29, 2017

Copy link to clipboard

Copied

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

}

}

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...
Nov 29, 2017 0
Explorer ,
Dec 02, 2017

Copy link to clipboard

Copied

Thanks for the answer but I'm sorry.. I don't know how to use it.. do I have to add it in Animate CC in the action panel or in a separated js code in my page ?

thank you !

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...
Dec 02, 2017 0
Adobe Community Professional ,
Dec 02, 2017

Copy link to clipboard

Copied

the actions panel.

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...
Dec 02, 2017 0
Explorer ,
Dec 02, 2017

Copy link to clipboard

Copied

so I guess this.mc.play(); -> mc is the movieclip that has to launch ?

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...
Dec 02, 2017 0
Adobe Community Professional ,
Dec 02, 2017

Copy link to clipboard

Copied

yes, that's the place-holder for the movieclip that you want to play when the page is scrolled.  px_to_mc is the number of pixels the page must scroll to bring that movieclip into the viewport.

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...
Dec 02, 2017 0
Explorer ,
Dec 02, 2017

Copy link to clipboard

Copied

Sorry I don't understand.. it was so easy in Edge Animate and I'm new in Animate CC

Can you provide me a working example please?

thank you..

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...
Dec 02, 2017 0
Adobe Community Professional ,
Dec 02, 2017

Copy link to clipboard

Copied

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...
Dec 02, 2017 0
Explorer ,
Dec 03, 2017

Copy link to clipboard

Copied

Thank you a lot !!! I'm going to try this example !!!

Have a nice day !

Chris

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...
Dec 03, 2017 0
Adobe Community Professional ,
Dec 03, 2017

Copy link to clipboard

Copied

you're welcome.

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...
Dec 03, 2017 0
New Here ,
Dec 04, 2019

Copy link to clipboard

Copied

hi kglad, i want to understand the same, but your above examples files are not availabe on mentioned link, can please provide me the same. thanks in advance

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...
Dec 04, 2019 0
Community Beginner ,
Apr 07, 2018

Copy link to clipboard

Copied

Hello Chris,

Do you have the same code to launch animation when visibility is "true" ?

It would be so useful as i work with iframe for my animations

Thks a lot

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...
Apr 07, 2018 0
Explorer ,
Apr 11, 2018

Copy link to clipboard

Copied

still didn't manage to make the example work..

for the moment I focuse on trying to load external content into an animate cc comp just like it was possible in flash many years ago via actionscript (loadmovie) but not anymore with the new animate cc.. it's really a pain

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...
Apr 11, 2018 0