menu

Spirit

Spirit is the ultimate tool for creating animations for the web. Live edit animations directly in the browser.

Channels
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Feature Requests
view-forward
# Help
view-forward
# Show and Tell
view-forward
Team

WordPress integration?

October 15, 2019 at 1:34pm

WordPress integration?

October 15, 2019 at 1:34pm
Hi, just wondering if someone can help me embedding the player in a WordPress theme? I have created an animation, exported the JSON file, pasted the JS script web player code and the animation load script before the closing body tag, as shown on your "Get Started" page but no luck. This is the code I'm using below (am I missing something?):
<!-- include the web player --> <script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>
<!-- play animation --> <script> spirit.loadAnimation({ autoPlay: true, path: {"version_app":"1.1.3","version_extension":"1.3.13","version_runtime":"2.4.1","groups":[{"root":{"path":"/html[1]/body[1]","id":null},"name":"WordPress_Logo","timeScale":1,"timelines":[{"type":"dom","props":{"scaleY":{"0s":{"value":"0","ease":"Elastic.easeOut"},"0.4515734521028037s":{"value":"0","ease":"Elastic.easeOut"},"1.3387850467289717s":{"value":"1","ease":"Elastic.easeOut"}}},"label":"div[2]/div/div/div/div/div/section[2]/div/div/div/div/div/div[3]/div/div/div/div/div/div/div/div/section/div/div/div/div/div/div/div/div/div/div/div/svg","path":"div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/section[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/section[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/[local-name()='svg'][1]"}]},{"root":{"path":"/html[1]/body[1]","id":null},"name":"WordPress_Logo","timeScale":1,"timelines":[{"type":"dom","label":"div[2]/div/div/div/div/div/section[2]/div/div/div/div/div/div[3]/div/div/div/div/div/div/div/div/section/div/div/div/div/div/div/div/div/div/div/div/svg","path":"div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/section[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/section[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/[local-name()='svg'][1]"}]}]} }) </script>

October 15, 2019 at 1:54pm
Can you open the Chrome devtools (CMD+ALT+I) and let me know what you see? (screenshot?). It might be possible that your html markup has changed. If you want to make sure elements are resolved correctly it's better to use [data-spirit-id] attributes, see https://docs.spiritapp.io/web-player/resolving-elements.html#spirit-id
like-fill
1
  • reply
  • like

October 15, 2019 at 11:06pm
Weird I can't even see the code loading.
  • reply
  • like
Sorry I'm not very good with JS - is the [data-spirit-id] a CSS ID I need to add to the element?
  • reply
  • like
I'm trying to animate the WordPress logo on the section of this homepage called "Built With WordPress" - https://custombuiltwebsites.com.au
  • reply
  • like
  • reply
  • like
So, I've added this attribute to the element I want to animate in the following fashion using Elementor Pro page builder. Is this what you meant by adding the [data-spirit-id] attribute?
  • reply
  • like
  • reply
  • like
I've now changed my code to the following - did i get it right ?
Edited
  • reply
  • like
If I can get this to work on my WordPress builds, I'll be stoked and will sign up for a paid plan.
  • reply
  • like

October 16, 2019 at 7:59am
Try this:
  • You should add attributes in your HTML (not adding it to the animation data).
  • Re-animate it with Spirit Studio
  • reply
  • like
Do you have a link somewhere to the site, maybe I can have a proper look
  • reply
  • like
Else we might setup a video chat so we'll get you sorted out
  • reply
  • like
Thanks added the attributes as described above within the Elementor Custom Attributes panel. Then I re-animated as instructed above. Now the code I inserted in the "wp-footer" section of my site is:
<!-- include the web player --> <script src="https://unpkg.com/spiritjs/dist/spirit.js"></script> <!-- play animation --> <script> spirit.loadAnimation({ autoPlay: true, path: {"version_app":"1.1.3","version_extension":"1.3.13","version_runtime":"2.4.1","groups":[{"root":{"path":"/html[1]/body[1]","id":null},"name":"wordpress_icon","timeScale":1,"timelines":[{"type":"dom","props":{"scaleY":{"0s":{"value":"0","ease":"Elastic.easeOut"},"1.1399146300636092s":{"value":"1","ease":"Elastic.easeOut"}}},"label":"div[2]/div/div/div/div/div/section[2]/div/div/div/div/div/div[3]/div/div/div/div/div/div/div/div/section/div/div/div/div/div/div/div/div/div/div/div/svg","path":"div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/section[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/section[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/*[local-name()='svg'][1]"}]}]}, }) </script>
But still not having any luck.
Could you please take a look? The website is: https://custombuiltwebsites.com.au
Edited
  • reply
  • like
  • reply
  • like
What I want to animate is the WordPress logo seen here.
  • reply
  • like

October 17, 2019 at 9:09am
you're almost there, it seems that the loadAnimation was incorrect. Copy/paste this and it works:
spirit.loadAnimation({
autoPlay: true,
animationData: {"version_app":"1.1.3","version_extension":"1.3.13","version_runtime":"2.4.1","groups":[{"root":{"path":"/html[1]/body[1]","id":null},"name":"wordpress_icon","timeScale":1,"timelines":[{"type":"dom","props":{"scaleY":{"0s":{"value":"0","ease":"Elastic.easeOut"},"1.1399146300636092s":{"value":"1","ease":"Elastic.easeOut"}}},"label":"div[2]/div/div/div/div/div/section[2]/div/div/div/div/div/div[3]/div/div/div/div/div/div/div/div/section/div/div/div/div/div/div/div/div/div/div/div/svg","path":"div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/section[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/section[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/*[local-name()='svg'][1]"}]}]},
})
  • reply
  • like
  • reply
  • like
this is what I did to make it work:
  • use animationData instead of path. (path is used when loading the JSON externally)
  • remove the single quotes around the animation data
  • reply
  • like
Thank I've added that code but its still not working - but it seems to have enlarged the logo in firefox and messed with the background section colour (removed it)....Any chance we can hook up a screenshare?
  • reply
  • like
that's weird.. as you can see in the screenshot above it should work. Please reach out to us at [email protected] and we'll continue the conversation there. Thanks!
like-fill
1
  • reply
  • like
Thanks - I really appreciate your help in this matter. I have emailed support.
  • reply
  • like

October 20, 2019 at 3:56am
thanks for meeting me via screenshare the other day. I've successfully loaded the hover script now, but I'm wondering if there's anything I can add to it that will remove the jittering - please view this video. Ideally, the icon should load the entire animation from start to finish when hovering over the whole of it - without jittering. Any thoughts? Also, is it possible to play the animation first on its own as soon as page loads, and then play again on mouse hover?
  • reply
  • like

October 20, 2019 at 6:40pm
You're welcome Gerson. Yes, this is because the mouseover listener is triggered multiple times, try to wrap it in a <div> and set the svg css to pointer-events: none; and apply the mouseover event on the div instead
  • reply
  • like
Show more messages