CODEWITHSUNDEEP
angularjscanvashtml5-canvasplanetary.js
François Romain
François Romain

Reputation: 14393

angular with canvas animation (planetaryjs) jerks after switching views

I am using planetaryjs inside an angular directive.

The planetary rotation animation is working fine when the page first loads, but after switching the views and coming back to the planetary animation, it starts to jerk.

Here is a Plunker showing the problem.

any idea how to solve this?

Upvotes: 1

Views: 923

Answers (1)

codef0rmer
codef0rmer

Reputation: 10530

I believe each time you go back and forth to planetary view, view-planetary.html unloads and loads again but the plantery.js event (planet.draw(canvas)) in your link function still remains in memory and hence it flickers because of multiple instances of planet.draw running. To get rid of this issue (which is a most common thing people forget to do especially when they bind external events angular is unaware of), we need to watch for the $destroy event on the element (canvas). Put below code inside a link method of planetary directive.

  element.on('$destroy', function() {
     // I did not find the destroy method to unload the planet in planetary.js
     // If you find it then put it here
     // For example, planet.destroy(canvas);
  });

Upvotes: 2

Related Questions