title: OpenLayers 3 - zoom to specific level after animation
body: <p>I've created a map in Openlayers 3 that is based off the "doBounce" (pan &amp; bounce animation) from this sample script (goo.gl/YoR7Ta). Here's <a href="http://jsfiddle.net/neviln/ggfpmutq/" rel="nofollow"> FIDDLE #1 </a> for the basic doBounce animation.</p>
  
  <p>What I'm aiming for is to have the map also do a zoom animation to a specific zoom level AFTER the "doBounce" animation. Each location will have a different zoom level. For example, when I click on "North Coast", it does the "doBounce" animation, then does a zoom animation to zoom level of 10. And when I click "Fraser River", it does "doBounce", then a zoom animation to zoom level of 12.</p>
  
  <p>I've spent the past few days trying to figure out how to do it &amp; have searched through google &amp; stackoverflow with no luck. </p>
  
  <p>The best I could come up with was putting together this hacky <a href="http://jsfiddle.net/neviln/wcn8vt0g/" rel="nofollow"> FIDDLE #2 </a> that at least lets me do some kind of zoom animation afterwards ...but it's not quite what I want. </p>
  
  <p>Here's my modified "doBounce" script from the second fiddle:</p>
  
  <pre><code>function doBounce(location) {
      var duration = 2500;
      var start = +new Date();
  
      //REMOVE COMMENT FROM NEXT LINE TO SEE TEMP FIX SO ZOOM OCCURS EACH TIME
      //map.getView().setResolution(500);
  
      var bounce = ol.animation.bounce({
          duration: duration,
          resolution: view.getResolution() * 5,
          start: start
      });
  
      var pan = ol.animation.pan({
          duration: duration,
          source: view.getCenter(),
          start: start
      });
  
      var zoom = ol.animation.zoom({
          resolution: view.getResolution(),
          duration: 800,
          easing: ol.easing.linear,
        start: start + 2500
      });
  
      map.beforeRender(bounce, pan);
      view.setCenter(location);
  
      setTimeout(function() {
          map.beforeRender(zoom);
          view.setResolution(250);
      }, 2510);
  }
  </code></pre>
  
  <p>I used a timeout to delay the zoom animation until the "deBouce" animation has finished. This finally allowed me to have a zoom animation but it would only happen on the first click. The following clicks would not show a zoom animation (I assume because <code>ol.animation.bounce()</code> returns the same resolution it started with). </p>
  
  <p>To fix this, I added <code>view.setResolution(500);</code> at the start of the function so that it changes the resolution. This way, at least the zoom animation would work on each click. You can see what I mean by running the fiddle and then removing the commented line and running it again.</p>
  
  <p>Is there a way to have each location smoothly zoom into a specific zoom level after the "doBounce" animation?</p>
  
  <p>I'm fairly new to Javascript &amp; Openlayers so any help or suggestions are greatly appreciated. </p>