0 180 0 1 180 0 0 hidden transform 0 .8 top left 1 1 .01 .5 0 .8 1 power4.out top 60% top 10% true 360 180 none .05
1 transform top top bottom top true 20vmin none .001 auto .33 hidden auto 75 3 .15 top center hidden transform 60 .9 0 center 60% play none none reverse 0 1 .01 1 .8 .1

Fades on Scroll

A simple starter component to fade targets in (and up) when the page is scrolled to an element.

<!-- create component, define users -->
<soulmagic id="fades" users=".fades-row">

    <!-- set initial styles -->
    <set targets=".fades-target">
        <y>60</y>
        <opacity>0</opacity>
    </set>

    <!-- define the event -->
    <event type="scroll"></event>

    <!-- execute the animation timeline -->
    <timeline>
        <to targets=".fades-target">
            <y>0</y>
            <opacity>1</opacity>
            <stagger>.1</stagger>
        </to>
    </timeline>
  
</soulmagic>
<!-- create component, define users -->
<soulmagic id="fades" users=".fades-row">

    <!-- set initial styles -->
    <set targets=".fades-target">
        <y>60</y>
        <opacity>0</opacity>
    </set>

    <!-- define the event -->
    <event type="scroll"></event>

    <!-- execute the animation timeline -->
    <timeline>
        <to targets=".fades-target">
            <y>0</y>
            <opacity>1</opacity>
            <stagger>.1</stagger>
        </to>
    </timeline>
  
</soulmagic>

Ready to use this component in your Beaver Builder sites?

Install SoulMagic and SoulSections, then copy and paste the above code into a SoulSections module.