Will & Skill Developers

Will & Skill Developers


Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Erik Svedin
Author

Share


Animate ui-view with GSAP

Erik SvedinErik Svedin

GSAP is a great way to create animations using javascript. I wont delve any further in to what it is, but I suggest you check it out if you haven't already at their website .

Use TweenMax to animate your ui-view.

The trick to using TweenMax or Lite is to use the ngAnimation service. To use this you must throw in a css class selector, and make use of the enter and leave events to add your TweenMax code. Be sure to call the done function after animation is complete.

An example of the animation service in use:

app.animation('.main-content', function(){  
  return {
    enter: function(element, done) {
      TweenMax.from(element, 1, {opacity:0, x:50, onComplete:done})
    },
    leave: function(element, done) {
      TweenMax.to(element, 1, {opacity:0, x:50, onComplete:done})
    }
  }
})

This required you to add the class main-content to you ui-view element.

A full codepen with this can be seen here:

See the Pen jbBddy by Erik Svedin (@svdn) on CodePen.

Erik Svedin
Author

Erik Svedin

Comments