Skip to main content
Known Participant
November 29, 2017
Answered

Launch animate cc movie when scroll

  • November 29, 2017
  • 3 replies
  • 2013 views

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 !

This topic has been closed for replies.
Correct answer kglad

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

}

}

3 replies

patrickb89495570
Known Participant
April 7, 2018

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

Known Participant
April 12, 2018

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

Known Participant
December 2, 2017

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 !

kglad
Community Expert
Community Expert
December 2, 2017

the actions panel.

Known Participant
December 2, 2017

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

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
November 29, 2017

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

}

}