Animate element when is visible in the viewport with polymer neon animations

Question

I have this Element, and now it animates when i open the page.

<dom-module id="intro-el">
    <template>
        <style>
            :host {
                display: block;
            }
            iron-image{
                width:500px;
                height: 400px;
                width:100%;
            }
        </style>
        <div >

            <h1 id="animateH1">Test Title</h1>
            <p id="animateP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis reiciendis distinctio nulla sint.</p>
            <iron-image id="animateImg"src="/images/auto/some.png" preload sizing="contain"></iron-image>

        </div>
    </template>
    <script>
        Polymer({
            is: 'intro-el',
            behaviors: [
              Polymer.NeonAnimationRunnerBehavior

            ],
            properties: {
                animationConfig: {
                    value: function(){
                       return{ 
                           'entryH1': [{
                            name: 'slide-from-bottom-animation',
                            node: this.$.animateH1,
                             timing: {delay: 450}
                        }

                        ],
                        'entryP': [{
                            name: 'slide-from-left-animation',
                             timing: {delay: 650},
                            node: this.$.animateP
                        }

                        ],
                        'entryImg': [{
                            name: 'slide-from-right-animation',
                            node: this.$.animateImg
                        }

                        ]
                    }
                }
                }
            },
            ready: function(){
                this.playAnimation('entryH1');
                this.playAnimation('entryP');
                this.playAnimation('entryImg');


            },

        });
    </script>
</dom-module>

What i want to do is animate it when the element scrolls into view. Is there a way to listen to the element when it scrolls into view, or is there any behavior that i could implement? Thank you very much!

Answer 1

I don't know about a Polymer behavior, but you can do:

<dom-module id="intro-el">
    <template>
        <style>
            :host {
                display: block;
            }
            iron-image {
                width: 500px;
                height: 400px;
            }
        </style>
            <h1 id="animateH1">Test Title</h1>
            <p id="animateP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis reiciendis distinctio nulla sint</p>
            <iron-image id="animateImg"
                        src="http://www.fillmurray.com/500/400"
                        sizing="contain"
                        preload></iron-image>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'intro-el',
        behaviors: [
          Polymer.NeonAnimationRunnerBehavior

        ],
        listeners: {
            'neon-animation-finish': '_onNeonAnimationFinish'
        },
        properties: {
            isElementInViewport: {
                type: Boolean,
                value: false,
                observer: '_onElementInViewportChanged'
            },
            animationRunning: {
                type: Boolean,
                value: false
            },
            animationConfig: {
                value: function () {
                    return { 
                        'entryH1': [{
                            name: 'slide-from-bottom-animation',
                            node: this.$.animateH1,
                             timing: {delay: 450}
                        }],
                        'entryP': [{
                            name: 'slide-from-left-animation',
                             timing: {delay: 650},
                            node: this.$.animateP
                        }],
                        'entryImg': [{
                            name: 'slide-from-right-animation',
                            node: this.$.animateImg
                        }]
                    }
                }
            }
        },
        ready: function () {
            this._onScroll = this._onScroll.bind(this);
        },
        attached: function () {
            window.addEventListener('scroll', this._onScroll);
            this._triggerAnimation();
        },
        detached: function () {
            window.removeEventListener('scroll', this._onScroll);
        },
        _onScroll: function () {
            if (this.animationRunning) {
                return;
            }
            this._inspectElementPosition();
        },
        _inspectElementPosition: function () {
            let bodyOffset = window.scrollY || window.pageYOffset,
                lowTriggerPoint = this.offsetTop - window.innerHeight * 0.05,
                highTriggerPoint = this.offsetTop + window.innerHeight * 0.05;

            this.isElementInViewport =
                    bodyOffset > lowTriggerPoint && bodyOffset < highTriggerPoint;
        },
        _onElementInViewportChanged (inViewport) {
            if (inViewport) {
                this._triggerAnimation();
            }
        },
        _triggerAnimation: function () {
            ['entryH1', 'entryP', 'entryImg'].forEach((el) => {
                this.playAnimation(el);
                this.animationRunning = true;
            });
        },
        _onNeonAnimationFinish: function () {
            this.animationRunning = false;
        }
    });
</script>