My animation script is making the page unresponsive


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Ananth on 24th October 2017
Hi Richard,

i was using animations like grow and implode for graph's on one page where that graph will generate dynamically on checkbox changes where i am seeing script unresponsive error after 4 or 5 clicks do we have any option to overcome this?

An unresponsive script warning is a message that appears in a browser

Thanks,
Ananth
Posted by Richard on 24th October 2017
Hi there,

How many animations? If you use a lot it may slow down the browser.

Also, Chrome slows down background tabs, which causes issues with animations - so try a browser other than Chrome (eg Internet Explorer) and see if the same thing happens.

Richard
Posted by Ananth on 24th October 2017
Hi Richard,

i am using 3 line charts, 1 pie chart and 1 bar chart so i have 5 charts with animations like trace2 for line and implode for pie and grow for bar

i did tried in IE and same error like getting slow after 4 or 5 clicks, how can i use common animation for all any option please help,

Thanks,
Ananth
Posted by Richard on 24th October 2017
Hi there,

Are they all running at the same time? Running 5 animations simultaneously will of course be slow.

One thing to remember about canvas animations is that they can cause all canvas tags on the page to be redrawn in some situations.

You might want to consider using CSS animations instead of the canvas based animations that you're using currently.

Here are some links that talkabout/explain CSS effects:

www.rgraph.net/blog/css3-animations.html
www.rgraph.net/canvas/docs/howto-use-css3-animations.html
www.rgraph.net/demos/effects-css3-animations.html

They are the effects that are facilitated by the Animate CSS library.

There's also some RGraph effects that use CSS. These can be seen in the demos:

www.rgraph.net/demos/index.html#effects

Richard
Posted by Ananth on 24th October 2017
Hi Richard,

thanks for the information and yes all 5 executing simultaneously let me try CSS animation and get back to you in case of any issues.

Thanks,
Ananth
Posted by Richard on 24th October 2017
Hi there,

I think the CSS Animate library would be best:

www.rgraph.net/canvas/docs/howto-use-css3-animations.html

And:

www.rgraph.net/svg/docs/css-animations-and-effects.html


Richard
Posted by Ananth on 24th October 2017
Hi Richard,

thank you i think CSS animation is for the whole graph and not for the bar or line? like if i use trace for line chart it basically draws from one value till nth value do we have any option for that in CSS?

like fadeslidein or implode or explode etc

Thanks,
Ananth
Posted by Richard on 24th October 2017
Hi there,

> if i use trace for line chart it basically draws from one value till nth value
> do we have any option for that in CSS?

That's correct. CSS animations work on the whole canvas or SVG tag - not the elements inside them.

Maybe SVG elements might work like this - perhaps as browsers progress - but not currently AFAIK.

If they do though - I would not imagine that it would be sufficiently cross browser compatible. It would probably only be working in Chrome or Blink based browsers.

Richard

Add a reply




« Back to message list