I use Ember and Liquid Fire to create interesting animated transitions between routes inspired by material design.
I created two transitions. The first occurs during the transition from the index route to the about route and successfully uses the explode , flyTo and toLeft . Here, I map the data-nav attribute on both routes to create a smooth, seamless transition that makes the moveable item move across the screen to the next page as it flies left. Thumbs up!
The second occurs when moving from the about route to the index route. Here I map a different element than the above to the data-text attribute on both routes, however, unlike the above example, the elements are not identical. In particular, the font size is different. Unfortunately, this leads to the undesirable effect of immediately displaying a larger font size and then moving it around the page.
What I would like to do is add an extra transition that enlivens the font size. Sounds simple enough.
Below is my initial transitions.js file with the two transitions.js described above.
export default function() { var duration = 1000; this.transition( // --------------------- INDEX to ABOUT ----------------------------------- // this.fromRoute('index'), this.toRoute('about'), this.use('explode', { matchBy: 'data-nav', use: [ 'flyTo', { duration } ] }, { use: [ 'toLeft', { duration } ] }), // --------------------- ABOUT to INDEX ----------------------------------- // this.reverse('explode', { matchBy: 'data-text', use: [ 'flyTo', { duration } ] }, { use: [ 'toRight', { duration } ] }) ); }
I believe the answer is to create your own custom transition, however it turned out to be quite complicated. I created a custom transition called scale-font.js and added it to my transitions.js file for this transition.
import { animate, Promise } from "liquid-fire"; export default function scaleFont(opts={}) { // returns a Promise that resolves when the transition is done if (!this.newElement) { return Promise.resolve(); } else if (!this.oldElement) { this.newElement.css({visibility: ''}); return Promise.resolve(); } var oldFontSize = this.oldElement.css('font-size'); var newFontSize = (opts.selector ? this.newElement.find(opts.selector) : this.newElement).css('font-size'); this.newElement.css({ visibility: 'hidden' }); return animate( this.oldElement, { fontSize: oldFontSize }, { duration: 1000 } ).then(() => { return animate( this.newElement, { fontSize: newFontSize }, { duration: 1000, visibility: 'visible' } ); }); }
Unfortunately, this does not quite work. The first problem is that oldFontSize incorrect. As a result, he gets a new font size. The second problem is the lack of font scaling.
I studied animated fonts, so I'm pretty sure it can be done. Suggestions?