Title: External JS Animation via Inline Render Callback
Last modified: June 4, 2017

---

# External JS Animation via Inline Render Callback

 *  Resolved [ryanfriedman](https://wordpress.org/support/users/ryanfriedman/)
 * (@ryanfriedman)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/)
 * First off – thanks for building this plugin, it’s easy to use and effective.
 * My issue is that I’m trying to animate SVGs after they’ve been rendered inline,
   but the external JS fires before the replacement, and the element isn’t inlined
   on the page yet.
 * How can I target the SVG once the replacement has occurred?
 * It would be awesome if there was a callback function that could be used to fire
   our JS animations after the SVG replacement has occurred.
 * I can animate the SVG from the JS console once the inline replacement has occurred,
   leading me to believe it’s just an ‘order of operations’ type problem.
 * It’s also quite possible I’m doing something wrong 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196286)
 * Hi [@ryanfriedman](https://wordpress.org/support/users/ryanfriedman/),
 * Thanks for your support and enjoying my plugin!
 * This issue came up a couple of years back and I added some code to the JS so 
   there is new classes added only once the SVG is inline, so you can target them
   specifically. This allows you to target the `.svg-replaced` class (check your
   code for the actual number attached).
 * I hope this helps.
 * Let me know how you go.
 * Cheers
    Ben
 *  Thread Starter [ryanfriedman](https://wordpress.org/support/users/ryanfriedman/)
 * (@ryanfriedman)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196335)
 * Hi Ben,
 * Thanks for the quick reply!
 * I can see how this would help with CSS animations but I don’t see how this would
   help with JS, since the JS is firing before the inlining takes place, and there’s
   no way I can postpone it until after.
 * Even if I use the .svg-replaced class to target the SVG in JS, it will not be
   found because the element does not exist inline yet.
 * The issue is more event driven than target driven.
 * Hope this makes sense.
 * -Ryan
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196360)
 * Could you not just fire your JS inside a function that targets the element?
    `
   $('.replaced-svg')`
 * Or use the following:
 *     ```
       $(window).load(function(){
         //your code here
       });
       ```
   
 *  Thread Starter [ryanfriedman](https://wordpress.org/support/users/ryanfriedman/)
 * (@ryanfriedman)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196386)
 *     ```
       $(window).load(function(){
         //your code here
       });
       ```
   
 * Did the trick! Thanks for answering these queries on a Sunday!
 * This might be worth adding to the docs for using JS animations. I was using $(
   document).ready, thinking it would have the same effect, but I was wrong. My 
   knowledge of JS has now been expanded!
 * Targeting via $(‘.replaced-svg’) wasn’t working because the item wasn’t on the
   page when the JS fired. Since $(window).load is event driven, it’ll postpone 
   the firing of the JS until your script does its magic.
 * Thanks again!
    -  This reply was modified 9 years ago by [ryanfriedman](https://wordpress.org/support/users/ryanfriedman/).
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196394)
 * Thanks for letting me know, I’m glad I could help.
 * I plan on making some actual documentation and videos for the plugin, so will
   certainly consider mentioning this 🙂
 * Cheers

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘External JS Animation via Inline Render Callback’ is closed to new replies.

 * ![](https://ps.w.org/svg-support/assets/icon.svg?rev=3554681)
 * [SVG Support](https://wordpress.org/plugins/svg-support/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/svg-support/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/svg-support/)
 * [Active Topics](https://wordpress.org/support/plugin/svg-support/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/svg-support/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/svg-support/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/external-js-animation-via-inline-render-callback/#post-9196394)
 * Status: resolved