Animations

To create an animation scene, use a wrapper with the .section-content class as follows.

Markup

<section class="section section-content">
  <div 
    class="section-content__content content js-arts-split-text arts-split-text"
    data-arts-os-animation="true"
    data-arts-os-animation-name="animateText"
    data-arts-os-animation-params="{stagger: {amount: 0.3, from: 'left'}}"
    data-arts-split-text="lines"
    data-arts-split-text-set="lines"
    data-arts-split-text-overflow-wrap="lines"
  >
    <h3>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against.</h3>
    <p>We invest in bespoke pieces for your home so your home really reflects your personal style. It’s really important that there is a synergy between the design of your home and your tastes.</p>
    <p>Use securing confined his shutters. Delightful as he it acceptance an solicitude discretion reasonably.</p>
  </div>
</section>

Attributes

• data-arts-os-animation – Prevents FOUC (opens new window) of the animated element by setting opacity: 0; visibility: hidden;.
• data-arts-os-animation-name – Specifies the animation name. See Available Animations.
• data-arts-os-animation-params – Specifies the animation parameters.

Available Animations

animateText
hideText

animateHeadline
hideHeadline

animateMask
hideMask

animateJump
hideJump

animateScale
hideScale

animateStroke

animateCounter