Resolving elements

Also see the Getting Started - Create Group page on this topic.

XPath

By default Spirit resolves elements using XPath. An XPath expression might look something like section[2]/div/span, describing the location in the Document Object Model.

Example:

XPath expression:

article[2]/div/p

HTML:

<article class="post">
  <h1>Post 1</h1>
  <div class="inner">
    <p>Some body text post 1</p>
  </div>
</article>

<article class="post">
  <h1>Post 2</h1>
  <div class="inner">
    <p>Some body text post 2</p>
  </div>
</article>

Resolves:

<p>Some body text post 2</p>

Although this works for static web pages, it might not be a good solution for web pages where the html structure changes frequently, for example Single Page Apps. Simply because the expression might not lead to the expected element. To solve this issue, add a data-spirit-id attribute.

Spirit ID

Add a data-spirit-id attribute to elements you'd like to animate:

<div data-spirit-id="container"/>
  <img src="landscape.png" data-spirit-id="landscape" />
  <div>
    <p data-spirit-id="text">
      Body text
    </p>
  </div>
</div>

Resolves:

container  ->  <div />
landscape  ->  <img />
text       ->  <p />

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""