title: How to use Ember Liquid-Fire to transition between two elements with different font sizes
body: <p>I'm using Ember and <a href="http://ef4.github.io/liquid-fire/">Liquid Fire</a> to create some interesting material-design-inspired animated transitions between routes.</p>
  
  <p>I've created two transitions. The first occurs during the transition from the <code>index</code> route to the <code>about</code> route and uses the <code>explode</code>, <code>flyTo</code>, and <code>toLeft</code> transitions successfully. Here I match by a <code>data-nav</code> attribute on both routes to create a smooth, seamless transition that makes the matched element appear to move across the screen to the next page as it flies left. Thumbs up!</p>
  
  <p>The second occurs during the transition from the <code>about</code> route back to the <code>index</code> route. Here I match a different element than above by a <code>data-text</code> attribute on both routes, however unlike the example above, the elements are not identical. Specifically, the font-size is different. Unfortunately this has an undesired effect of immediately displaying the larger font-size text and then having it fly across the page.</p>
  
  <p>What I'd like to do is add an additional transition that animates the font-size. Sounds simple enough.</p>
  
  <p>Below is my initial <code>transitions.js</code> file with the two transitions described above.</p>
  
  <pre><code>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 } ]
      })
    );
  }
  </code></pre>
  
  <p>I believe the answer is to create my own custom transition, however it is turning out to be rather challenging. I created a custom transition called <code>scale-font.js</code> and added it to my <code>transitions.js</code> file for this transition.</p>
  
  <pre><code>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(() =&gt; {
      return animate(
        this.newElement,
        { fontSize: newFontSize },
        { duration: 1000, visibility: 'visible' }
      );
    });
  }
  </code></pre>
  
  <p>Unfortunately this doesn't quite work. The first problem is that the <code>oldFontSize</code> is not correct. It ends up grabbing the new font size. The second problem is no font scaling occurs.</p>
  
  <p>I've researched animating fonts, so I am fairly certain it can be done. Suggestions?</p>