Start animation when div is scrolled to

Report · Dec 17, 2019

Hi

I've looked at this thread as I'm trying to achieve a similar outcome, where a 4 second animation is under the fold so I would like for the animation to start when the canvas/div is reached.

I've tried to follow the mentioned thread, but it seems the way I've published the animation is different, so I'm finding it difficult to follow.

For example, I'm using this method currently;

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="/js/animation-html5.js"></script>

<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("C04048E748054AC7B3D125241C9B5465");
	var lib=comp.getLibrary();
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib=comp.getLibrary();
	loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
}
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();
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	exportRoot = new lib.animationhtml5();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>

<body onload="init();">

<div id="animation_container" style="width:1280px; height:700px">
		<canvas id="canvas" width="1280" height="700" style="position: absolute;  display: block;"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; bottom: 0px; display: block;">
		</div>

I have copied the code from the published html file and pasted it into my index.php file.

The method on the thread at the start is using iframe... so wasn't sure how to proceed?

Have I published incorrectly and should it be like the thread instead?

When publishing, I used the html5 method.

Thanks

Wayne

Adobe Community

Start animation when div is scrolled to