1/*! 2 * ScrollMagic v2.0.8 (2020-08-14) 3 * The javascript library for magical scroll interactions. 4 * (c) 2020 Jan Paepke (@janpaepke) 5 * Project Website: http://scrollmagic.io 6 * 7 * @version 2.0.8 8 * @license Dual licensed under MIT license and GPL. 9 * @author Jan Paepke - [email protected] 10 * 11 * @file ScrollMagic GSAP Animation Plugin. 12 * 13 * requires: GSAP ~1.14 14 * Powered by the Greensock Animation Platform (GSAP): http://www.greensock.com/js 15 * Greensock License info at http://www.greensock.com/licensing/ 16 */ 17/** 18 * This plugin is meant to be used in conjunction with the Greensock Animation Plattform. 19 * It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement. 20 * 21 * Both the `lite` and the `max` versions of the GSAP library are supported. 22 * The most basic requirement is `TweenLite`. 23 * 24 * To have access to this extension, please include `plugins/animation.gsap.js`. 25 * @requires {@link http://greensock.com/gsap|GSAP ~1.14.x} 26 * @mixin animation.GSAP 27 */ 28(function (root, factory) { 29 if (typeof define === 'function' && define.amd) { 30 // AMD. Register as an anonymous module. 31 define(['ScrollMagic', 'gsap', 'TweenMax', 'TimelineMax'], factory); 32 } else if (typeof exports === 'object') { 33 // CommonJS 34 // Loads whole gsap package onto global scope. 35 var gsap = require("gsap/dist/gsap") || require("gsap"); 36 37 // TweenMax/TimelineMax will be global in v2. In v3, they will be on the gsap object 38 factory(require('scrollmagic'), gsap, TweenMax || gsap, TimelineMax || gsap); 39 } else { 40 // Browser globals 41 factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.gsap, root.gsap || root.TweenMax || root.TweenLite, root.gsap || root.TimelineMax || root.TimelineLite); 42 } 43}(this, function (ScrollMagic, Gsap, Tween, Timeline) { 44 "use strict"; 45 var NAMESPACE = "animation.gsap"; 46 var GSAP3_OR_GREATER = Gsap && parseFloat(Gsap.version) >= 3; 47 48 var 49 console = window.console || {}, 50 err = Function.prototype.bind.call(console.error || console.log || function () {}, console); 51 if (!ScrollMagic) { 52 err("(" + NAMESPACE + ") -> 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."); 53 } 54 if (!Tween) { 55 err("(" + NAMESPACE + ") -> ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs."); 56 } 57 58 /* 59 * ---------------------------------------------------------------- 60 * Extensions for Scene 61 * ---------------------------------------------------------------- 62 */ 63 /** 64 * Every instance of ScrollMagic.Scene now accepts an additional option. 65 * See {@link ScrollMagic.Scene} for a complete list of the standard options. 66 * @memberof! animation.GSAP# 67 * @method new ScrollMagic.Scene(options) 68 * @example 69 * var scene = new ScrollMagic.Scene({tweenChanges: true}); 70 * 71 * @param {object} [options] - Options for the Scene. The options can be updated at any time. 72 * @param {boolean} [options.tweenChanges=false] - Tweens Animation to the progress target instead of setting it. 73 Does not affect animations where duration is `0`. 74 */ 75 /** 76 * **Get** or **Set** the tweenChanges option value. 77 * This only affects scenes with a duration. If `tweenChanges` is `true`, the progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state. 78 * For a better understanding, try enabling and disabling this option in the [Scene Manipulation Example](../examples/basic/scene_manipulation.html). 79 * @memberof! animation.GSAP# 80 * @method Scene.tweenChanges 81 * 82 * @example 83 * // get the current tweenChanges option 84 * var tweenChanges = scene.tweenChanges(); 85 * 86 * // set new tweenChanges option 87 * scene.tweenChanges(true); 88 * 89 * @fires {@link Scene.change}, when used as setter 90 * @param {boolean} [newTweenChanges] - The new tweenChanges setting of the scene. 91 * @returns {boolean} `get` - Current tweenChanges option value. 92 * @returns {Scene} `set` - Parent object for chaining. 93 */ 94 // add option (TODO: DOC (private for dev)) 95 ScrollMagic.Scene.addOption( 96 "tweenChanges", // name 97 false, // default 98 function (val) { // validation callback 99 return !!val; 100 } 101 ); 102 // extend scene 103 ScrollMagic.Scene.extend(function () { 104 var Scene = this, 105 _tween; 106 107 var log = function () { 108 if (Scene._log) { // not available, when main source minified 109 Array.prototype.splice.call(arguments, 1, 0, "(" + NAMESPACE + ")", "->"); 110 Scene._log.apply(this, arguments); 111 } 112 }; 113 114 // set listeners 115 Scene.on("progress.plugin_gsap", function () { 116 updateTweenProgress(); 117 }); 118 Scene.on("destroy.plugin_gsap", function (e) { 119 Scene.removeTween(e.reset); 120 }); 121 122 /** 123 * Update the tween progress to current position. 124 * @private 125 */ 126 var updateTweenProgress = function () { 127 if (_tween) { 128 var 129 progress = Scene.progress(), 130 state = Scene.state(); 131 if (_tween.repeat && _tween.repeat() === -1) { 132 // infinite loop, so not in relation to progress 133 if (state === 'DURING' && _tween.paused()) { 134 _tween.play(); 135 } else if (state !== 'DURING' && !_tween.paused()) { 136 _tween.pause(); 137 } 138 } else if (progress != _tween.progress()) { // do we even need to update the progress? 139 // no infinite loop - so should we just play or go to a specific point in t
139ime? 140 if (Scene.duration() === 0) { 141 // play the animation 142 if (progress > 0) { // play from 0 to 1 143 _tween.play(); 144 } else { // play from 1 to 0 145 _tween.reverse(); 146 } 147 } else { 148 // go to a specific point in time 149 if (Scene.tweenChanges() && _tween.tweenTo) { 150 // go smooth 151 _tween.tweenTo(progress * _tween.duration()); 152 } else { 153 // just hard set it 154 _tween.progress(progress).pause(); 155 } 156 } 157 } 158 } 159 }; 160 161 /** 162 * Add a tween to the scene. 163 * If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below). 164 * 165 * If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement. 166 * For a scene with a duration of `0`, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back. 167 * To gain better understanding, check out the [Simple Tweening example](../examples/basic/simple_tweening.html). 168 * 169 * Instead of supplying a tween this method can also be used as a shorthand for `TweenMax.to()` (see example below). 170 * @memberof! animation.GSAP# 171 * 172 * @example 173 * // add a single tween directly 174 * scene.setTween(TweenMax.to("obj"), 1, {x: 100}); 175 * 176 * // add a single tween via variable 177 * var tween = TweenMax.to("obj"), 1, {x: 100}; 178 * scene.setTween(tween); 179 * 180 * // add multiple tweens, wrapped in a timeline. 181 * var timeline = new TimelineMax(); 182 * var tween1 = TweenMax.from("obj1", 1, {x: 100}); 183 * var tween2 = TweenMax.to("obj2", 1, {y: 100}); 184 * timeline 185 * .add(tween1) 186 * .add(tween2); 187 * scene.addTween(timeline); 188 * 189 * // short hand to add a TweenMax.to() tween 190 * scene.setTween("obj3", 0.5, {y: 100}); 191 * 192 * // short hand to add a TweenMax.to() tween for 1 second 193 * // this is useful, when the scene has a duration and the tween duration isn't important anyway 194 * scene.setTween("obj3", {y: 100}); 195 * 196 * @param {(object|string)} TweenObject - A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples). 197 * @param {(number|object)} duration - A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used. 198 * @param {object} params - The parameters for the tween 199 * @returns {Scene} Parent object for chaining. 200 */ 201 Scene.setTween = function (TweenObject, duration, params) { 202 var newTween; 203 204 if (arguments.length > 1) { 205 var durationIsSet = typeof arguments['1'] === 'number'; 206 207 if (GSAP3_OR_GREATER) { 208 // If we're using gsap 3 with proper gsap 3 syntax of 2 arguments 209 if (!durationIsSet) { 210 params = duration; 211 } 212 // Add a duration is there isn't one 213 if (!params.hasOwnProperty('duration')) { 214 params.duration = durationIsSet ? duration : 1; 215 } 216 } else { 217 // If we're using gsap 2 or earlier syntax 218 if (arguments.length < 3) { 219 params = duration; 220 duration = 1; 221 } 222 } 223 224 // 2 arguments should be gsap 3 syntax, and 3 arguments for 225 TweenObject = GSAP3_OR_GREATER ? Tween.to(TweenObject, params) : Tween.to(TweenObject, duration, params); 226 } 227 try { 228 // wrap Tween into a Timeline Object if not gsap 3 or greater and available to include delay and repeats in the duration and standardize methods. 229 if (Timeline && !GSAP3_OR_GREATER) { 230 newTween = new Timeline({ 231 smoothChildTiming: true 232 }) 233 .add(TweenObject); 234 } else { 235 newTween = TweenObject; 236 } 237 newTween.pause(); 238 } catch (e) { 239 log(1, "ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject"); 240 return Scene; 241 } 242 if (_tween) { // kill old tween? 243 Scene.removeTween(); 244 } 245 _tween = newTween; 246 247 // some properties need to be transferred it to the wrapper, otherwise they would get lost. 248 if (TweenObject.repeat && TweenObject.repeat() === -1) { // TweenMax or TimelineMax Object? 249 _tween.repeat(-1); 250 _tween.yoyo(TweenObject.yoyo()); 251 } 252 // Some tween validations and debugging helpers 253 254 if (Scene.tweenChanges() && !_tween.tweenTo) { 255 log(2, "WARNING: tweenChanges will only work if the TimelineMax object is available for ScrollMagic."); 256 } 257 258 // check if there are position tweens defined for the trigger and warn about it :) 259 if (_tween && Scene.controller() && Scene.triggerElement() && Scene.loglevel() >= 2) { // controller is needed to know scroll direction. 260 var 261 triggerTweens = Tween.getTweensOf(Scene.triggerElement()),
262 vertical = Scene.controller().info("vertical"); 263 triggerTweens.forEach(function (value, index) { 264 var 265 tweenvars = value.vars.css || value.vars, 266 condition = vertical ? (tweenvars.top !== undefined || tweenvars.bottom !== undefined) : (tweenvars.left !== undefined || tweenvars.right !== undefined); 267 if (condition) { 268 log(2, "WARNING: Tweening the position of the trigger element affects the scene timing and should be avoided!"); 269 return false; 270 } 271 }); 272 } 273 274 // warn about tween overwrites, when an element is tweened multiple times 275 if (parseFloat(TweenLite.version) >= 1.14) { // onOverwrite only present since GSAP v1.14.0 276 var 277 // However, onInterrupt deprecated onOverwrite in GSAP v3 278 methodUsed = GSAP3_OR_GREATER ? 'onInterrupt' : 'onOverwrite', 279 list = _tween.getChildren ? _tween.getChildren(true, true, false) : [_tween], // get all nested tween objects 280 newCallback = function () { 281 log(2, "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"); 282 }; 283 for (var i = 0, thisTween, oldCallback; i < list.length; i++) { 284 /*jshint loopfunc: true */ 285 thisTween = list[i]; 286 if (oldCallback !== newCallback) { // if tweens is added more than once 287 oldCallback = thisTween.vars[methodUsed]; 288 thisTween.vars[methodUsed] = function () { 289 if (oldCallback) { 290 oldCallback.apply(this, arguments); 291 } 292 newCallback.apply(this, arguments); 293 }; 294 } 295 } 296 } 297 log(3, "added tween"); 298 299 updateTweenProgress(); 300 return Scene; 301 }; 302 303 /** 304 * Remove the tween from the scene. 305 * This will terminate the control of the Scene over the tween. 306 * 307 * Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene. 308 * @memberof! animation.GSAP# 309 * 310 * @example 311 * // remove the tween from the scene without resetting it 312 * scene.removeTween(); 313 * 314 * // remove the tween from the scene and reset it to initial position 315 * scene.removeTween(true); 316 * 317 * @param {boolean} [reset=false] - If `true` the tween will be reset to its initial values. 318 * @returns {Scene} Parent object for chaining. 319 */ 320 Scene.removeTween = function (reset) { 321 if (_tween) { 322 if (reset) { 323 _tween.progress(0).pause(); 324 } 325 _tween.kill(); 326 _tween = undefined; 327 log(3, "removed tween (reset: " + (reset ? "true" : "false") + ")"); 328 } 329 return Scene; 330 }; 331 332 }); 333}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.