Starting an Animate canvas animation only when the element comes in view

New Here ,
Nov 26, 2020

Copy link to clipboard

Copied

We exported an animation from Animate and included the element in a page, we need the animation starts only when that DOM element (a specific DIV) comes in view in the page.
Please be aware that the page is responsive so we cannot determine how many pixels that element has above.

 

Thanks for any help.

 

Franco

TOPICS
Code, How to, Publish package

Views

67

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

You mean that we need additional .js scripts such

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

 

for have it working?

 

 

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

i'm sure you could work-around using helper libraries but you would have more work to do.

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

I added the 2 scripts in the HEAD and then the init script before closing of body tag, but it doesn't work because in the page you linked they are working with an iframe element. I have instead a canvas element.

Shall we place also some actions in the .fla file so to stop the file at the first frame and then let the browser detect the element in view and tell the canvas animation to play?

Franco

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

offhand, i don't know how to adapt that script to your situation.

 

you should test and debug.

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

So it is possible to talk with someone that can help us in this activity? What we need to achieve is to let the animation plays as soon as the CANVAS object that holds that animation comes in view.

Thanks

 

Franco

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
kglad LATEST
Adobe Community Professional ,
Dec 04, 2020

Copy link to clipboard

Copied

these are user-to-user forums.

 

ie, there are, at least, a few of us regulars here that could work out solutions for what you want but it would take us time.  for simple things that take a few minutes or that particularly interest us, we do that for free via the public forums.

 

this is not something i would do for free.  (if you want to hire me to do this for you, send a private message, or email kglad99 @ gmail dot com .)  or wait and see if someone else here will do this for you for free.

Likes

Translate

Translate

Report

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