Page transitions in meteor?

Question

I've got a meteor mobile app structurally working; I really need to stitch the views together with some page transitions.

I looked at the iron-transitioner project but it looks like development has ceased? (last commit 6 months ago, still using Spark engine)

I've also looked at a few UI 'mobile frameworks' (Ratchet, Framework7) but I couldn't get them to play nicely with the meteor server.

I'm wondering if anyone knows of any other simple (left/right) page transition package / script that I could try? It's just to give my UI some (expected) slickness really.

Julien Le Coupanec · Accepted Answer · 2014-05-15T13:42:54.903

6

What about some jQuery with IronRouter?

Router.configure({
  load: function() {
    $('.content').animate({
      left: "-1000px",
      scrollTop: 0
    }, 400, function() {
        $(this).animate({ left: "0px" }, 400);
    });
});

What I also do to make a smooth transition between pages is to use a simple fadeIn/fadeOut.

Router.configure({
  load: function() {
    $('html, body').animate({
      scrollTop: 0
    }, 400);
    $('.content').hide().fadeIn(800);
  }
});

edited May 15 '14 at 13:42

answered May 15 '14 at 13:35

Julien Le Coupanec

7,742
9
53
67

Thanks Julien, that's a nice simple approach! I'd like to employ some CSS3 transitions where possible as they'll be smoother, and I'd also like to give direction instructions. Perhaps I need to write a function that I can pass some info to (transition, element etc)? Should I still try to use that within the load method? eg `load: pageTrans('left', '#mainContent')` ? – BellamyStudio May 15 '14 at 13:45
Yes, I think that the load method is the perfect place to do something like that. :) – Julien Le Coupanec May 15 '14 at 13:47
I'm in the same boat as you. The blaze branch is up to date: https://github.com/percolatestudio/iron-transitioner/tree/blaze – swennemen May 28 '14 at 06:42
The iron transitioner branch hasn't changed since I posted this question though, the last check-in was 22 days ago (May 7th) and still refers to the old {{yield}} etc – BellamyStudio May 29 '14 at 06:54
Ah ok. I managed to get the transistions working very easy with that package. However, the options were somewhat limited. Transistioning between different routes are not possible. Did you manage to get everything working with CSS3 animations? – swennemen Jun 21 '14 at 12:09

score 1 · Answer 2 · edited May 23 '17 at 12:06

I had a similar question here. Let us know how the above JQ method works out! Perpahs if you add transit.js you'll get nice hardware transitions. FWIW I think the Percolate team are using a version of IronTransitioner for their Verso mobile app, which has some nice CSS3 transitions. Did you try the IronTransitioner package? As you say /devel/ even hasn't been touched for 6 months.

EDIT percolateStudio fork of IT has this comment "Alright, pretty much seems to be working with blaze."

score 0 · Answer 3 · answered Jun 14 '15 at 15:00

I suggest using the animate.css library and adding animate classes to the main content in your templates. My 'main' templates now look like this:

<template name='home'>
{{> navbar}}

<div class="container animated fadeIn" id="content">
    {{> startBox}}
</div>

{{> notification}}

<div id='background-image'></div>
<div id='background-color'></div>

{{> footer}}</template>

Page transitions in meteor?

3 Answers3

Linked