2 Replies Latest reply on Sep 30, 2013 11:21 AM by Jonathan Fuerth

    Errai - Effects (animation) during page transition

    arnie-k Newbie

      How can I animate widgets which will be hidden during transition to next page?

      For example I want to slide widget to the left before new widget will be placed in its place,

      of course, new widget has to slide from somewhere to its new position.

      Is it possible? Since there is no page reload in GWT it should be possible.

      Maybe I have to delay process of transition, but how to do it?

        • 1. Re: Errai - Effects (animation) during page transition
          Max Barkley Expert

          Hi arnie-k,

           

          Are you asking how to do this with Errai Navigation? This isn't a directly supported feature, but you might be able to pull it off using the @PageHiding and @PageShown annotations.

           

          Errai Navigation works by attaching a navigation panel to your page: any page transition simply causes the content of the panel to change. So I think the best way to slide between pages with Errai Navigation would be to slide the navigation panel off the screen right before your first page is removed (using @PageHiding) and then slide the navigation panel back on screen after your next page has loaded (using @PageShown).

           

          I hope that gets you off to a good start.

           

          Cheers,

           

          Max

          • 2. Re: Errai - Effects (animation) during page transition
            Jonathan Fuerth Master

            We're also interested in adding a declarative API for page navigation transitions. No work has been done on this yet, but pull requests are cheerfully reviewed and accepted! ;-)

             

            Here's a brain dump of what I had in mind. This isn't a design document or anything; just some ideas to get the discussion started.

             

            First, we'd change the logic in errai's Navigation class to create the "to page" widget earlier. Many animations will work better if both the "from page" and the "to page" exist during the transition, since parts of both may be visible simultaneously. The optimal time to create the to page would probably be right after the from page's @PageHiding method returns.

             

            Then we'd need some new declarative API for specifying the transitions. Potential places to declare a transition effect:

             

            1. On the class (specifying the animation to be used when going to the page):

             

            @Page(effect = SlideRight.class)

            public class PreferencesPage extends Panel {

              ...

            }

             

            2. On a TransitionTo or TransitionAnchor (override the animation specified on the target page):

             

            @Page

            public class PreferencesPage extends Panel {

              @Inject @TransitionTo(effect = SlideRight.class)

              public TransitionTo<PreferencesPage> toPrefsPage;

             

              ...

            }

             

            3. In the programmatic API of Navigation, TransitionTo, TransitionAnchor (would be used by the generated code that comes from the annotation processing).

             

            Finally, we'd need an interface that the animated effects implement. We could model this after GWT's Animation or AnimationScheduler classes, probably adding an init() method that accepts the "from page" widget and the "to page" widget, as well as an inverse() method that returns the inverse effect, which we would use when navigating back through the transition when the user presses the back button.

             

            -Jonathan