Change RenderController transition speed globally

[vertangelx]

How can the slide transition used in RenderController be changed globally to a different velocity?

Session.set('currentTransition', 'windowSlideRight');

{{#RenderController transition=getTransition size="[150,150]"}}
    {{>Surface template=currentTemplate}}
{{/RenderController}}

Template.views_RenderController.helpers({
    'getTransition': function() {
        return Session.get('currentTransition');
    }
});

[PEM--]

https://github.com/gadicc/meteor-famous-views/blob/96402015bea07774ae936343ca7d8aaca42d24a8/lib/views/RenderController.js#L14

As you can see, it relies on the default duration which is 300ms. If you put a lower duration value in the property object of the Transform.translate, you can increase the velocity.

[vertangelx]

@PEM-- How can we edit the duration value for the transition? From https://famous-views.meteor.com/views/RenderController it seems like we can edit FView.from(this)._transition.period = 100 from Template.views_RenderController.rendered but ._transition is not defined.

[PEM--]

You are accessing a private member _transition. This should be avoided unless you really know how the internals are working.

Apparently, a RenderController exposes functions 2 functions for setting the in transformation and the out one, inTransformFrom and outTransformFrom respectively. These 2 functions are like the one used on Modifier (like depicted in this Famo.us university lesson: Transitionable & Modifier). This is with this 2 methods that you set your Transform.

This 2 Transform will need a Transition to work properly. This where comes into place the show and hidefunctions of the RenderController. Both of these accept a second argument: the Transition. This is where you can put your duration.

The RenderController is not an easy one to grasp but it's definitely a good choice for things like transitioning from one page to the other (with iron:router, for instance :wink: ).

[vertangelx]

@PEM-- Is the code below correct? It's giving me very strange behavior...

Template.views_RenderController.rendered = function () {
    fview = FView.from(this)
    slideWindow = function(progress) {
        return famous.core.Transform.translate(window.innerWidth * progress - window.innerWidth, 0, 0),
        { duration: 700, curve: famous.transitions.Easing.outBounce };
    }
    fview.view.inTransformFrom(slideWindow)
    fview.view.outTransformFrom(slideWindow)
};

[PEM--]

From what I know of, the Transition ({ duration: 700, curve: famous.transitions.Easing.outBounce }) should be set in the showand hide of the RenderController.

[gadicc]

I think it's ok to change fview._transition for now, as long as you understand that it could change at any time without warning :) In the future I think we can provide a cleaner API for these kind of things (via template arguments and reactivity). ._transition is undefined because we use defaults if it's not defined, so you should define the whole thing not just the duration part, e.g. fview._transition = { duration: 700, curve: famous.transitions.Easing.outBounce }.

[vertangelx]

@gadicc @PEM-- Setting different fview._transition does not appear to change the page transition.

{{> RenderController size="[undefined,undefined]" transition=currentTransition translate=menuTranslate modifier="StateModifier" template="rcTemplate"}}

Template.rcTemplate.rendered = function () {
    var fview = FView.from(this);
    fview._transition = { method: famous.transitions.SpringTransition, period: 8, dampingRatio: 0.2, velocity: 10 };
};

Template.rcTemplate.rendered = function () {
    var fview = FView.from(this);
    fview._transition = { duration: 7000, curve: famous.transitions.Easing.outBounce };
};

[gadicc]

Hey, sorry for the long delay. I've been away without internet but am slowly catching up on everything. I'm confirming that this was a bug, that has now been fixed, and will be in the upcoming v0.1.31 release. Since you've already been very patient, I'm happy to release a pre-release version sooner than that if you're currently actively coding. Thanks for your patience.

[rafaelquintanilha]

I tried the solutions proposed by @vertangelx but didn't seem to work. Sorry if I didn't grasp everything, but currently which is the recommended approach for this issue?