I can't get force feeding to work

[ccorcos]

This doesnt work...

    $node.insertBefore(next)
      .velocity {translateX: ['0%', '100%']},
        duration: 500
        easing: 'ease-in-out'
        queue: false

It only works when I use a hook:

    $.Velocity.hook($node, "translateX", "100%");
    $node.insertBefore(next)
      .velocity {translateX: '0%'},
        duration: 500
        easing: 'ease-in-out'
        queue: false

Am I missing something?

[ccorcos]

Ok. So I've fiddled around a little more ;)

Force-feeding works. But on certain browsers (every time with firefox, sometimes with Safari, never with Chrome), you'll see a brief flash when the element is inserted before velocity catches it and moves it.

For example, check out the slide left button on this demo: http://transition-demo.meteor.com/

P.S. I'm using velocity to make a much needed page transitioning package for meteor: https://github.com/ccorcos/meteor-transitioner

And great job with this framework.

[ccorcos]

Ok. Here we go:

Here's the code:
https://gist.github.com/anonymous/23f0f73678bc81354908

and here it is on CodePen:
http://codepen.io/ccorcos/pen/gbxGpZ

You'll notice there is a flash of red when you press the button

[ydaniv]

@ccorcos that's because how you're inserting the second page into the DOM dynamically on click. Try giving us a clean example where the elements are present in the DOM before you move them around with Velocity.
To be more specific, it's probably due to the fact you're inserting an element that's initially in view when inserted.

[ccorcos]

Yeah, I see. The problem for me is that this is the way meteor works. I'm given and insert and remove function and I need to to insert it into the dom and do this animation. The odd thing is that any of the built-in effects don't have this flickering problem:

https://github.com/julianshapiro/velocity/blob/master/velocity.ui.js#L535

But the ones I wrote do have this problem:

$.Velocity.RegisterEffect 'transition.pushRightIn', 
  defaultDuration: 500,
  calls: [
    [{translateX: ['0%', '100%'], translateZ: 0, easing: "ease-in-out"}]
  ]

$.Velocity.RegisterEffect 'transition.pushLeftOut', 
  defaultDuration: 500,
  calls: [
    [{translateX: ['-100%', '0%'], translateZ: 0, easing: "ease-in-out"}]
  ]

Notice the difference between slideLeft and slideRight in this demo: http://transition-demo.meteor.com

Any ideas?

[julianshapiro]

Taking a look now.

[julianshapiro]

The UI pack addresses the flashing by immediately setting opacity upfront: https://github.com/julianshapiro/velocity/blob/master/velocity.ui.js#L134.

I would try doing that with your code as well. Let me know how that works out.

[ccorcos]

Interesting. I see whats going on here. Every effect animates opacity. Is it possible to immediately animate the opacity to prevent the flash?

Here's what I have going right now...

$.Velocity.RegisterEffect('transition.pushRightIn', {
  defaultDuration: 500,
  calls: [
    [
      {
        translateX: ['0%', '100%'],
        translateZ: 0,
        easing: "ease-in-out"
      }
    ]
  ]
});

[julianshapiro]

oh shit, you're right! it's because you have to explicitly animate opacity in there. either throw it in as a dummy property (E.g. opacity: [ 1, 1]) or manually set opacity to 0 before the animation begins

[ccorcos]

Much better! That works. Thanks.

[az-iB]

i suggest to remove the style attribute after the transition complete

var start = '100%'; $.Velocity.hook(node, 'translateX', start); $(node) .insertBefore(next) .velocity({translateX: [0, start]}, { duration: ANIMATION_DURATION, easing: 'ease-in-out', queue: false, complete: function() { $(node).removeAttr("style"); } });