I'm in the process of refining this custom animation to make it smoother. Check out the live animation here.
The issue I'm encountering is that during the transition when the city name rotates up and replaces the old one, the text-align center property causes the h2 text to abruptly re-align center in a single frame. My goal is to achieve a seamless transition where it gradually eases into aligning center instead of an instant jump.
I hope that explanation clarifies things. Here's the code snippet:
HTML
<div class="coverage">
<h2>Kellin has service in <span class="flip"></span></h2>
<ul class="coverage_list">
...
</ul>
</div><!-- end .coverage -->
CSS
.coverage{
...
}
...
JS / Jquery
var coverageVars = {
...
}
$(document).ready(function(){
...
});
I think adjusting margins and applying CSS transitions might be the solution, but I can't seem to figure it out on my own. Appreciate any guidance you can provide. Thank you!