External JS Animation via Inline Render Callback

Resolved ryanfriedman
(@ryanfriedman)

8 years, 12 months ago

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
(@benbodhi)

8 years, 12 months ago

Hi @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
(@ryanfriedman)

8 years, 12 months ago

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
(@benbodhi)

8 years, 12 months ago
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
(@ryanfriedman)

8 years, 12 months ago
```
$(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 8 years, 12 months ago by ryanfriedman.
Plugin Author Benbodhi
(@benbodhi)

8 years, 12 months ago

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.