Working towards hero like transitions.

[JohnRodney]

First I'd like to thank you for your extensive work on animations and transitions in the meteor community. I've been very happy with your libraries so far.

What I'm attempting to do is create hero transitions using your transitioner plugin. I need to be able to basicly grab both the items on the page you transition from and the items on the page to transition too.

I've used some custom attributes like hero="true" and hero-id="dynamic".. then I find elements during the transition that have the same hero-id. So far looked good, but when I try to find any values for their css or offset or anything like that. One has values the other is undefined or fires a jQuery error. Its weird because visibly they are both in the dom for me. If I can nail down the ability to find the css values of both objects during transition then the rest becomes a tween engine which is pretty run of the mill programming.

I'd like it to be completely abstract in the sense that it can find any number of hero-id pairs and tween their start and finish css over a duration. I'm basicly asking because I've seen you very active on alot of different discussions in metoer transitions and was hoping you might be able to shed some light how to get both states during transitions or if you think I'm even heading the in the right direction.

[JohnRodney]

I got something close but still having to work out some caveats. I have a demo repo at https://github.com/JohnRodney/meteor-hero-test. I am still open for discussion if anyone else is interested in having hero-transitions in their meteor apps.

[ccorcos]

hmm never heard the term "hero" animations before but I'm all about it. I actually just did this for React last week. This kind of stuff is definitely a necessity for mobile apps. Did you notice a little jank in your example though? Looking at the Timeline in the Chrome Dev Tools, it looks like it spikes below 60fps...

I noticed when I was working on the Tracker Streams drag and drop example that attaching jquery event listeners was very expensive. Perhaps this is one of the reasons React works so well?

As far as suggestions, use CSS translate3d and opacity instead of absolute positioning and visibility. translate3d and opacity are hardware accelerated. Check out the bottom of the readme for my hero animation implementation for React.

Also, I've lost a lot of faith in Iron Router lately. Its been very hard to contribute to and its not very simple anymore. I like FlowRouter because its dead simple (and plays nice with React ;)

I'm still trying to understand how your demo works -- when do you ever have both templates rendered on screen at the same time?

[nicooprat]

Any news on this idea ?

Don't know if it can help, but Ramjet is a small library that "morph" elements to another : http://www.rich-harris.co.uk/ramjet/

Agree that it would be a huge bonus for mobile (or not) apps.

[JohnRodney]

Sorry we ended accomplishing this by not using this repo altogether. We used a mix query param state control combined with velocity JS to accomplish the appropriate animations with a native feeling. I guess I will close this issue and if you would like further information on the subject just ping me.

[ccorcos]

yeah, i just use React now anyways ;)

[nicooprat]

Ok, in what way does React help for transitions ? I'm currently working with Framework7 and having a hard time to get transitions from it and router from Meteor working together.

I know it's a bit out of the subject of this repo but I think it could help some other people.

[JohnRodney]

Well I can cover what we have used.

We developed a param manager called formaldehyde. What is does is manage the state of your application and components through query params. By using this we've moved away from a router almost altogether. We only load new pages when needed (very rarely) and try to request all the data upfront. There were a few reason's for this. In apps people don't expect a whitescreen in between screens like you do on the internet. So we have tried playing a different game. We also developed a meteor package with the swiper io plugin. This allows us to now use query params to move between swiper slides. This saves us spikes of tracker.autorun, and iron router data loading from interfering with the animations that we want to display during transitions.

React is also very good at dom diffing allowing for less changes in the dom when new components are loaded as suggested by @ccorcos . We've used a little bit of react and do like it, but getting non choppy animations is something you can achieve in any environment you just have to look at what you are doing when the animation gets choppy and cut down on cpu/gpu usage.

The last tool we used was velocity.js for the actual animations. It has a jQuery like syntax, but uses css and gpu first then falls back to javascript if the device doesn't support those. Its more performant than jQuery, but still gives you a familiar syntax.

P.S. We did try ramjet and there were too many inconsistencies with it for what we were trying to achieve.

In the end if you watch a bunch of google videos you'll notice its kind of the same process they use with hybrid apps. Use window.pushstate to control your window state and loading, and they pre-ajax in new data rather than doing so at the moment of the request. Its an interesting model, but if you get it right you can give the appearance in your hybrid app that the user never has to wait for anything, because its all already there.

[nicooprat]

Thanks for the precise answer :) Looks like you've tweaked Meteor a lot, it's a bit beyond my understanding...!

[ccorcos]

React is great. It takes some time to get comfortable with but im never going back to HTML. For really doe hero animations, you have a couple options.

1) you can have everything absolutely positioned within some parent container and use CSS transitions. 2) you can listen to enter and leave hooks, hide the component on enter (set opacity to 0), and on leave, compute the differences in width, height, color, etc. and use Velocity.js to animate to the new position before removing the old element and setting opacity to 1 on the new element. This works pretty great actually, but there are a couple quirks -- you cant stop an animation in the middle, and you need to make sure that you dont clobber the animation if the user spams a button. Also, you'll want the elements to be absolutely positioned fully within the parent container to they lay on top of each other when they're both in the DOM at the same time rather than being laid out inline or block. 3) they best solution isnt exactly easy. heck out magic-move -- it fucking amazing. It uses the virtual dom and this concept of a portal offscreen which computes all the layout for you. Then with a cloned version of the elements, you can pretend everything is absolutely positioned and do really sweet native css transitions which dont get clobbered when you spam the button :)

[JohnRodney]

@nicooprat Nothing is beyond your understanding! Just keep learning and programming you'll get it in no time.

@ccorcos nice that sounds really interesting. Do you have any demo apps/repos up of your process? I'd be interested in checking out your process.

Are you using react in meteor as well or did you drift away from meteor too?

[ccorcos]

I'm using meteor, react, coffeescript, stylus, and ramda. Thats pretty much everything. I'm also using my client-side router and letting react manage all the logic and routing after the initial page load.

I dont have a good example for you -- I havent worked on hero animations in a while, but thats how you do it!