Animations

Whenever you'd like to create an animation scene, use a wrapper with .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 girl 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 – place this attribute to prevent FOUC (opens new window) of the animated element. This attribute sets opacity: 0; visibility: hidden; of the element.
• data-arts-os-animation-name – animation name. See Available Animations.
• data-arts-os-animation-params – animation parameters.

Available Animations

animateText
hideText

animateHeadline
hideHeadline

animateMask
hideMask

animateJump
hideJump

animateScale
hideScale

animateStroke

animateCounter