|
| 1 | +!(function (e, n) { |
| 2 | + "function" == typeof define && define.amd |
| 3 | + ? define(["ScrollMagic", "TweenMax", "TimelineMax"], n) |
| 4 | + : "object" == typeof exports |
| 5 | + ? (require("gsap"), n(require("scrollmagic"), TweenMax, TimelineMax)) |
| 6 | + : n( |
| 7 | + e.ScrollMagic || (e.jQuery && e.jQuery.ScrollMagic), |
| 8 | + e.TweenMax || e.TweenLite, |
| 9 | + e.TimelineMax || e.TimelineLite |
| 10 | + ); |
| 11 | +})(this, function (e, n, o) { |
| 12 | + "use strict"; |
| 13 | + var t = window.console || {}, |
| 14 | + r = Function.prototype.bind.call(t.error || t.log || function () {}, t); |
| 15 | + e || |
| 16 | + r( |
| 17 | + "(animation.gsap) -> ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs." |
| 18 | + ), |
| 19 | + n || |
| 20 | + r( |
| 21 | + "(animation.gsap) -> ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs." |
| 22 | + ), |
| 23 | + e.Scene.addOption("tweenChanges", !1, function (e) { |
| 24 | + return !!e; |
| 25 | + }), |
| 26 | + e.Scene.extend(function () { |
| 27 | + var e, |
| 28 | + t = this, |
| 29 | + r = function () { |
| 30 | + t._log && |
| 31 | + (Array.prototype.splice.call( |
| 32 | + arguments, |
| 33 | + 1, |
| 34 | + 0, |
| 35 | + "(animation.gsap)", |
| 36 | + "->" |
| 37 | + ), |
| 38 | + t._log.apply(this, arguments)); |
| 39 | + }; |
| 40 | + t.on("progress.plugin_gsap", function () { |
| 41 | + i(); |
| 42 | + }), |
| 43 | + t.on("destroy.plugin_gsap", function (e) { |
| 44 | + t.removeTween(e.reset); |
| 45 | + }); |
| 46 | + var i = function () { |
| 47 | + if (e) { |
| 48 | + var n = t.progress(), |
| 49 | + o = t.state(); |
| 50 | + e.repeat && -1 === e.repeat() |
| 51 | + ? "DURING" === o && e.paused() |
| 52 | + ? e.play() |
| 53 | + : "DURING" === o || e.paused() || e.pause() |
| 54 | + : n != e.progress() && |
| 55 | + (0 === t.duration() |
| 56 | + ? n > 0 |
| 57 | + ? e.play() |
| 58 | + : e.reverse() |
| 59 | + : t.tweenChanges() && e.tweenTo |
| 60 | + ? e.tweenTo(n * e.duration()) |
| 61 | + : e.progress(n).pause()); |
| 62 | + } |
| 63 | + }; |
| 64 | + (t.setTween = function (a, s, l) { |
| 65 | + var c; |
| 66 | + arguments.length > 1 && |
| 67 | + (arguments.length < 3 && ((l = s), (s = 1)), (a = n.to(a, s, l))); |
| 68 | + try { |
| 69 | + (c = o ? new o({ smoothChildTiming: !0 }).add(a) : a).pause(); |
| 70 | + } catch (e) { |
| 71 | + return ( |
| 72 | + r( |
| 73 | + 1, |
| 74 | + "ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject" |
| 75 | + ), |
| 76 | + t |
| 77 | + ); |
| 78 | + } |
| 79 | + if ( |
| 80 | + (e && t.removeTween(), |
| 81 | + (e = c), |
| 82 | + a.repeat && -1 === a.repeat() && (e.repeat(-1), e.yoyo(a.yoyo())), |
| 83 | + t.tweenChanges() && |
| 84 | + !e.tweenTo && |
| 85 | + r( |
| 86 | + 2, |
| 87 | + "WARNING: tweenChanges will only work if the TimelineMax object is available for ScrollMagic." |
| 88 | + ), |
| 89 | + e && t.controller() && t.triggerElement() && t.loglevel() >= 2) |
| 90 | + ) { |
| 91 | + var u = n.getTweensOf(t.triggerElement()), |
| 92 | + p = t.controller().info("vertical"); |
| 93 | + u.forEach(function (e, n) { |
| 94 | + var o = e.vars.css || e.vars; |
| 95 | + if ( |
| 96 | + p |
| 97 | + ? void 0 !== o.top || void 0 !== o.bottom |
| 98 | + : void 0 !== o.left || void 0 !== o.right |
| 99 | + ) |
| 100 | + return ( |
| 101 | + r( |
| 102 | + 2, |
| 103 | + "WARNING: Tweening the position of the trigger element affects the scene timing and should be avoided!" |
| 104 | + ), |
| 105 | + !1 |
| 106 | + ); |
| 107 | + }); |
| 108 | + } |
| 109 | + if (parseFloat(TweenLite.version) >= 1.14) |
| 110 | + for ( |
| 111 | + var g, |
| 112 | + d, |
| 113 | + f = e.getChildren ? e.getChildren(!0, !0, !1) : [e], |
| 114 | + w = function () { |
| 115 | + r( |
| 116 | + 2, |
| 117 | + "WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another" |
| 118 | + ); |
| 119 | + }, |
| 120 | + h = 0; |
| 121 | + h < f.length; |
| 122 | + h++ |
| 123 | + ) |
| 124 | + (g = f[h]), |
| 125 | + d !== w && |
| 126 | + ((d = g.vars.onOverwrite), |
| 127 | + (g.vars.onOverwrite = function () { |
| 128 | + d && d.apply(this, arguments), w.apply(this, arguments); |
| 129 | + })); |
| 130 | + return r(3, "added tween"), i(), t; |
| 131 | + }), |
| 132 | + (t.removeTween = function (n) { |
| 133 | + return ( |
| 134 | + e && |
| 135 | + (n && e.progress(0).pause(), |
| 136 | + e.kill(), |
| 137 | + (e = void 0), |
| 138 | + r(3, "removed tween (reset: " + (n ? "true" : "false") + ")")), |
| 139 | + t |
| 140 | + ); |
| 141 | + }); |
| 142 | + }); |
| 143 | +}); |
| 144 | + |
| 145 | +var html = document.documentElement; |
| 146 | +var body = document.body; |
| 147 | + |
| 148 | +var scroller = { |
| 149 | + target: document.querySelector(".scroll-container"), |
| 150 | + ease: 0.09, // <= scroll speed |
| 151 | + endY: 0, |
| 152 | + y: 0, |
| 153 | + resizeRequest: 1, |
| 154 | + scrollRequest: 0, |
| 155 | +}; |
| 156 | + |
| 157 | +var requestId = null; |
| 158 | + |
| 159 | +TweenLite.set(scroller.target, { |
| 160 | + rotation: 0.01, |
| 161 | + force3D: true, |
| 162 | +}); |
| 163 | + |
| 164 | +window.addEventListener("load", onLoad); |
| 165 | + |
| 166 | +function onLoad() { |
| 167 | + updateScroller(); |
| 168 | + window.focus(); |
| 169 | + window.addEventListener("resize", onResize); |
| 170 | + document.addEventListener("scroll", onScroll); |
| 171 | +} |
| 172 | + |
| 173 | +function updateScroller() { |
| 174 | + var resized = scroller.resizeRequest > 0; |
| 175 | + |
| 176 | + if (resized) { |
| 177 | + var height = scroller.target.clientHeight; |
| 178 | + body.style.height = height + "px"; |
| 179 | + scroller.resizeRequest = 0; |
| 180 | + } |
| 181 | + |
| 182 | + var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0; |
| 183 | + |
| 184 | + scroller.endY = scrollY; |
| 185 | + scroller.y += (scrollY - scroller.y) * scroller.ease; |
| 186 | + |
| 187 | + if (Math.abs(scrollY - scroller.y) < 0.05 || resized) { |
| 188 | + scroller.y = scrollY; |
| 189 | + scroller.scrollRequest = 0; |
| 190 | + } |
| 191 | + |
| 192 | + TweenLite.set(scroller.target, { |
| 193 | + y: -scroller.y, |
| 194 | + }); |
| 195 | + |
| 196 | + requestId = |
| 197 | + scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null; |
| 198 | +} |
| 199 | + |
| 200 | +function onScroll() { |
| 201 | + scroller.scrollRequest++; |
| 202 | + if (!requestId) { |
| 203 | + requestId = requestAnimationFrame(updateScroller); |
| 204 | + } |
| 205 | +} |
| 206 | + |
| 207 | +function onResize() { |
| 208 | + scroller.resizeRequest++; |
| 209 | + if (!requestId) { |
| 210 | + requestId = requestAnimationFrame(updateScroller); |
| 211 | + } |
| 212 | +} |
| 213 | + |
| 214 | +const controller = new ScrollMagic.Controller(); |
| 215 | + |
| 216 | +var forEach = function (array, callback, scope) { |
| 217 | + for (var i = 0; i < array.length; i++) { |
| 218 | + callback.call(scope, i, array[i]); |
| 219 | + } |
| 220 | +}; |
| 221 | + |
| 222 | +var myNodeList = document.querySelectorAll(".img-loader"); |
| 223 | + |
| 224 | +forEach(myNodeList, function (index, value) { |
| 225 | + const tween = TweenMax.to(value, 2, { |
| 226 | + borderTopLeftRadius: "100%", |
| 227 | + borderTopRightRadius: "100%", |
| 228 | + delay: 0.3, |
| 229 | + height: 0, |
| 230 | + ease: Power2.easeOut, |
| 231 | + }); |
| 232 | + |
| 233 | + const itemScene = new ScrollMagic.Scene({ |
| 234 | + triggerElement: value, |
| 235 | + triggerHook: 0.6, |
| 236 | + reverse: false, |
| 237 | + }) |
| 238 | + .setTween(tween) |
| 239 | + .addTo(controller); |
| 240 | +}); |
0 commit comments