https://www.tvfestival.com/assets/js/components/hs.onscroll-animation.js

1/**
2 * Wrapper for creating animation when an element appear in the screen.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires appear.js 
7 *
8 */
9;
10(function($) {
11  'use strict';
12
13  $.HSCore.components.HSOnScrollAnimation = {
14
15    /**
16     * Base configuration.
17     *
18     * @var Object _baseConfig
19     */
20    _baseConfig: {
21      bounds: -100,
22      debounce: 50,
23      inViewportClass: 'u-in-viewport',
24      animation: 'fadeInUp',
25      animationOut: false,
26      animationDelay: 0,
27      animationDuration: 1000,
28      afterShow: function(){},
29      onShown: function(){},
30      onHidded: function(){}
31    },
32
33    /**
34     * Collection of all instances of the page.
35     *
36     * @var jQuery _pageCollection
37     */
38    _pageCollection: $(),
39
40
41    /**
42     * Initialization of animation.
43     *
44     * @param jQuery selector (optional)
45     * @param Object config (optional)
46     *
47     * @return jQuery _pageCollection - collection of initialized items.
48     */
49    init: function(selector, config) {
50
51      if( !selector || !$(selector).length ) return;
52
53      var self = this;
54
55      this.config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
56
57      appear({
58        bounds: self.config['bounds'],
59        reappear: false,
60        debounce: self.config['debounce'],
61        elements: function(){
62          return document.querySelectorAll(selector);
63        },
64        init: function() {
65          $(selector).each(function(i, el){
66
67            var $this = $(el);
68
69            // if(!(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))) {
70              if (!$this.data('HSAnimationElement')) {
71                $this.data('HSAnimationElement', new HSAnimationElement($this, self.config));
72
73                self._pageCollection = self._pageCollection.add($this);
74              }
75            // } else {
76            //   $this.addClass(self.config.inViewportClass);
77            // }
78
79          });
80        },
81        appear: function(el) {
82          var $el = $(el);
83
84          // if(!(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))) {
85            if (!$el.hasClass(self.config.inViewportClass)) {
86              $el.data('HSAnimationElement').show();
87            }
88          // }
89        }
90
91      });
92
93      return this._pageCollection;
94
95    }
96
97  }
98
99  /**
100   * HSAnimationElement constructor function.
101   * 
102   * @param jQuery element
103   * @param Object config
104   *
105   * @return undefined
106   */
107  function HSAnimationElement(element, config) {
108
109    if( !element || !element.length ) return;
110
111    var self = this;
112
113    this.element = element;
114    this.config = config && $.isPlainObject(config) ? $.extend(true, {}, config, element.data()) : element.data();
115
116    if( !isFinite( this.config.animationDelay ) ) this.config.animationDelay = 0;
117    if( !isFinite( this.config.animationDuration ) ) this.config.animationDuration = 1000;
118
119    element.css({
120      'animation-duration': self.config.animationDuration + 'ms'
121    });
122
123  }
124
125  /**
126   * Shows element.
127   * 
128   * @return undefined
129   */
130  HSAnimationElement.prototype.show = function() {
131
132    var self = this;
133
134    if(this.config.animationDelay) {
135      this.timeOutId = setTimeout( function(){
136
137        self.element
138            .removeClass(self.config.animationOut)
139            .addClass(self.config.animation + ' ' + self.config.inViewportClass);
140        self.config.afterShow.call( self.element );
141
142        self.callbackTimeoutId = setTimeout( function(){
143          self.config.onShown.call( self.element );
144        }, self.config.animationDuration );
145
146      }, this.config.animationDelay );
147    }
148    else {
149      this.element
150          .removeClass(this.config.animationOut)
151          .addClass(this.config.animation + ' ' + this.config.inViewportClass);
152      this.config.afterShow.call( this.element );
153
154      this.callbackTimeoutId = setTimeout( function(){
155        self.config.onShown.call( self.element );
156      }, this.config.animationDuration );
157    }
158
159  }
160
161  /**
162   * Hides element.
163   * 
164   * @return undefined
165   */
166  HSAnimationElement.prototype.hide = function() {
167
168    var self = this;
169
170    if( !this.element.hasClass(this.config.inViewportClass) ) return;
171
172    if( this.config.animationOut ) {
173
174      this.element
175        .removeClass( this.config.animation )
176        .addClass( this.config.animationOut );
177
178      this.callbackTimeoutId = setTimeout(function(){
179
180        self.element.removeClass(self.config.inViewportClass);

181        self.config.onHidded.call( self.element );
182
183      }, this.config.animationDuration);
184
185    }
186    else {
187
188      this.element.removeClass(this.config.inViewportClass + ' ' + this.config.animation);
189      this.config.onHidded.call( this.element );
190    }
191
192  }
193
194})(jQuery);