search

chenqingspring / vue-lottie

Render After Effects animations on Vue based on Bodymovin
MIT License
1.31k stars 281 forks source link

Fire animation after scroll into viewport #24

Closed jamesgillispie closed 5 years ago

jamesgillispie commented 5 years ago

Been struggling to get this to work, any chance you could suggest a way?

this.anim.play();

error: Cannot pass anim object into function. Using this code

      function navSlide(anim) {
        var topthis = $('.animate-this').offset();
        var $window = $(window);
        if ( $window.scrollTop() >= topthis.top) {
          this.anim.play();
        }
      }

      navSlide();

error: vue.esm.js:591 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'anim' of undefined"

innovaweb-dev commented 5 years ago

Hi @jamesgillispie You must just add anim in your component's data.

Jamesbillard12 commented 5 years ago

You could use a interception observer.( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ). There is a polyfill on npm (https://www.npmjs.com/package/intersection-observer) for browsers that don't currently support this API.

jamesgillispie commented 5 years ago

@Jamesbillard12 thanks for pointing me in right direction, installed https://github.com/Akryum/vue-observe-visibility, and visibilityChanged (isVisible, entry) { this.isVisible = isVisible // console.log(entry); if (entry.isIntersecting) { this.anim.play(); } } works