Как сделать запуск svg-анимации текста при видимости?

Question

У меня есть 3 раздела на моей странице `

<a href="#" class="next-section">Next Section</a> 
    <div class="section-content"> 

    </div> 
</section> 

<section id="about"> 
    <a href="#" class="prev-section">Previous Section</a> 
    <a href="#" class="next-section">Next Section</a> 
    <div class="section-content"> 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="480px" height="640px" viewBox="0 0 480 640" enable-background="new 0 0 480 640" xml:space="preserve"> 

<rect x="68.631" y="175.105" fill="none" width="350.877" height="113.158"/> 

"SVG-Paths ЗДЕСЬ"

</div> 
</section> 

<section id="services"> 
    <a href="#" class="prev-section">Previous Section</a> 
    <div class="section-content"> 

    </div> 
</section> 

Они прокруткой щелчком с JavaScript

jQuery.fn.extend({ 
    scrollTo : function(speed, easing) { 
    return this.each(function() { 
     var targetOffset = $(this).offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, speed, easing); 
    }); 
    } 
}); 

$('.next-section').click(function(e){ 
    e.preventDefault(); 
    var $this = $(this), 
     $next = $this.parent().next(); 

    $next.scrollTo(150, 'linear'); 
}); 

$('.prev-section').click(function(e){ 
    e.preventDefault(); 
    var $this = $(this), 
     $prev = $this.parent().prev(); 

    $prev.scrollTo(150, 'linear'); 
}); 

Во втором разделе я имею некоторые svg, анимированный с помощью CSS, но я хотел бы начать анимацию, когда svg будет виден. Как мне это сделать?

Answer 1

Вы можете передать «полную» функцию в jQuery animate(). Эта полная функция вызывается, когда анимация завершается. В этой функции вы можете добавить класс в свой SVG, который запускает анимацию.