Start Animation (Animate CC) only when the canvas become visible after scrolling.
up vote
0
down vote
favorite
I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case.
This is the original code I'm trying to change:
<html>
<head>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container,
fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Water_illustrazione_revista_scrollplay();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//follow a code to support hidpi screens and responsive scaling.
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="anchor5" class="Anime_p">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
<canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
</body>
</html>
javascript adobe-animate
edited Nov 1 at 15:04
Daniel A. White
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
add a comment |
up vote
0
down vote
favorite
I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case.
This is the original code I'm trying to change:
<html>
<head>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container,
fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Water_illustrazione_revista_scrollplay();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//follow a code to support hidpi screens and responsive scaling.
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="anchor5" class="Anime_p">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
<canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
</body>
</html>
javascript adobe-animate
edited Nov 1 at 15:04
Daniel A. White
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case.
This is the original code I'm trying to change:
<html>
<head>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container,
fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Water_illustrazione_revista_scrollplay();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//follow a code to support hidpi screens and responsive scaling.
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="anchor5" class="Anime_p">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
<canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
</body>
</html>
javascript adobe-animate
edited Nov 1 at 15:04
Daniel A. White
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case.
This is the original code I'm trying to change:
<html>
<head>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container,
fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Water_illustrazione_revista_scrollplay();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//follow a code to support hidpi screens and responsive scaling.
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="anchor5" class="Anime_p">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
<canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
</body>
</html>
javascript adobe-animate
javascript adobe-animate
edited Nov 1 at 15:04
Daniel A. White
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
edited Nov 1 at 15:04
Daniel A. White
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
edited Nov 1 at 15:04
Daniel A. White
147k36292372
edited Nov 1 at 15:04
Daniel A. White
147k36292372
edited Nov 1 at 15:04
Daniel A. White
147k36292372
147k36292372
asked Nov 1 at 14:59
Lorenzo Scodeller
33
asked Nov 1 at 14:59
Lorenzo Scodeller
33
asked Nov 1 at 14:59
Lorenzo Scodeller
33
33
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
- Add exportRoot.stop(); in the end of fnStartAnimation();
- Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
- Whenever the condition is satisfied, add the code - exportRoot.play();
answered Nov 11 at 19:12
thirstyClouds
1245
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
- Add exportRoot.stop(); in the end of fnStartAnimation();
- Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
- Whenever the condition is satisfied, add the code - exportRoot.play();
answered Nov 11 at 19:12
thirstyClouds
1245
add a comment |
up vote
0
down vote
accepted
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
- Add exportRoot.stop(); in the end of fnStartAnimation();
- Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
- Whenever the condition is satisfied, add the code - exportRoot.play();
answered Nov 11 at 19:12
thirstyClouds
1245
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
- Add exportRoot.stop(); in the end of fnStartAnimation();
- Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
- Whenever the condition is satisfied, add the code - exportRoot.play();
answered Nov 11 at 19:12
thirstyClouds
1245
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
- Add exportRoot.stop(); in the end of fnStartAnimation();
- Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
- Whenever the condition is satisfied, add the code - exportRoot.play();
answered Nov 11 at 19:12
thirstyClouds
1245
answered Nov 11 at 19:12
thirstyClouds
1245
answered Nov 11 at 19:12
thirstyClouds
1245
answered Nov 11 at 19:12
thirstyClouds
1245
1245
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53103854%2fstart-animation-animate-cc-only-when-the-canvas-become-visible-after-scrolling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
