-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHypeScrollMagic.min.js
More file actions
19 lines (19 loc) · 6.8 KB
/
HypeScrollMagic.min.js
File metadata and controls
19 lines (19 loc) · 6.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
Hype ScrollMagic v1.1.1
Integrates ScrollMagic with Tumult Hype for scroll-based animations and interactions.
Copyright (2024) Max Ziebell, (https://maxziebell.de). MIT-license
*/
'use strict';!1==="HypeScrollMagic"in window&&(window.HypeScrollMagic=function(){function A(b){return b?p[b]:p}function G(b,d){for(;d&&d!==document;){const f=b.getSymbolInstanceById(d.id);if(f)return f;d=d.parentNode}return null}function C(b,d,f,a){function r(c,h){var t=h.scrollDirection.charAt(0).toUpperCase()+h.scrollDirection.slice(1).toLowerCase();h=w?w+" ":"";t=h+c+" "+t;c=h+c;b.triggerCustomBehaviorNamed(t);b.triggerCustomBehaviorNamed(c);p.logBehavior&&(console.log(c),console.log(t))}function g(c,
h){if(B){const t=a.scrollCode;(c=a[c.toLowerCase()+"Code"]||t)&&b.triggerAction(c,{element:d,event:h})}}const k=b.currentSceneId(),B=!1!=="HypeActionEvents"in window,w=a.scrollName||f,D=new ScrollMagic.Controller({vertical:a.horizontal?!1:!0});u[k]||(u[k]=[]);u[k].push(D);a=Object.assign({},p.options,a);const x=document.getElementById(k);var e=d.getBoundingClientRect()[a.horizontal?"width":"height"],n=a.horizontal?d.getBoundingClientRect().left-x.getBoundingClientRect().left:d.getBoundingClientRect().top-
x.getBoundingClientRect().top;let q=void 0!==a.offset?a.offset:n,m=void 0!==a.duration?a.duration:e,y=void 0!==a.triggerHook?a.triggerHook:.5;var l=G(b,d);const z=l?l:b;"string"===typeof m&&(m=m.endsWith(a.horizontal?"vw":"vh")?parseInt(m)+"%":m.endsWith("%")?parseFloat(m)/100*e:parseFloat(m));"string"===typeof q&&(q=q.endsWith("%")?parseFloat(q)/100*e+n:parseFloat(q));if(B){l=a.scrollCode;e=a.offsetCode||l;n=a.durationCode||l;l=a.triggerHookCode||l;const c={offset:q,duration:m,triggerHook:y};e&&
(q=b.triggerAction("return "+e,{element:d,scope:c,event:Object.assign(c,{type:"offset"})})??q);n&&(m=b.triggerAction("return "+n,{element:d,scope:c,event:Object.assign(c,{type:"duration"})})??m);l&&(y=b.triggerAction("return "+l,{element:d,scope:c,event:Object.assign(c,{type:"triggerHook"})})??y)}e=new ScrollMagic.Scene({triggerElement:x,offset:q,duration:m,triggerHook:y});a.elementClass&&(e.on("enter",function(c){d.classList.add(a.elementClass)}),e.on("leave",function(c){d.classList.remove(a.elementClass)}));
a.sceneClass&&(e.on("enter",function(c){x.classList.add(a.sceneClass)}),e.on("leave",function(c){x.classList.remove(a.sceneClass)}));a.hasOwnProperty("properties")&&(n="string"===typeof a.properties?a.properties||"scroll":"scroll",l="scroll"===n?d:document.getElementById(b.documentId()),l.style.setProperty("--"+n+"-duration",m),l.style.setProperty("--"+n+"-offset",q),l.style.setProperty("--"+n+"-trigger-hook",y),l.style.setProperty("--"+n+"-progress",0));a.pin&&e.setPin(d,{pushFollowers:!1});if(f&&
a.reset)e.on("add",function(c){z.pauseTimelineNamed(f);z.goToTimeInTimelineNamed(0,f)});e.on("progress",function(c){if(a.hasOwnProperty("properties")){var h="string"===typeof a.properties?a.properties||"scroll":"scroll";("scroll"===h?d:document.getElementById(b.documentId())).style.setProperty("--"+h+"-progress",c.progress)}f&&(h=z.durationForTimelineNamed(f),0!==h&&z.goToTimeInTimelineNamed(c.progress*h,f));B&&(h=a.scrollCode,(h=a.progressCode||h)&&b.triggerAction(h,Object.assign({element:d,event:c})))});
const E=w&&p.behavior.enter;if(E||a.enterCode)e.on("enter",function(c){E&&r("Enter",c);a.enterCode&&g("Enter",c)});const F=w&&p.behavior.leave;if(F||a.leaveCode)e.on("leave",function(c){F&&r("Leave",c);a.leaveCode&&g("Leave",c)});e.addTo(D);e.addIndicators&&(p.addIndicators||a.addIndicators)&&e.addIndicators({name:w,colorStart:a.indicatorColor,colorEnd:a.indicatorColor,colorTrigger:a.indicatorColor});v[k]||(v[k]=[]);v[k].push(e);return e}if(window.ScrollMagic){ScrollMagic.Scene.prototype.addIndicators=
null;ScrollMagic.Scene.prototype.removeIndicators=null;var u={},v={},p={options:{triggerHook:.5,pin:!1,reset:!0,indicatorColor:"grey"},behavior:{enter:!0,leave:!0},timelineName:"Main Timeline",logBehavior:!1,addIndicators:!0,autoProperties:!0};!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeDocumentLoad",callback:function(b,d,f){b.addScrollTimeline=function(a,r,g){return C(b,a,r,g)}}});window.HYPE_eventListeners.push({type:"HypeSceneLoad",
callback:function(b,d){const f=!1!=="HypeActionEvents"in window;d.querySelectorAll("[data-scroll-timeline],[data-scroll-pin],[data-scroll-properties],[data-scroll-element-class],[data-scroll-scene-class]"+(f?",[data-scroll-action],[data-scroll-progress-action],[data-scroll-enter-action],[data-scroll-leave-action]":"")).forEach(function(a){const r=a.hasAttribute("data-scroll-timeline")?a.getAttribute("data-scroll-timeline")?a.getAttribute("data-scroll-timeline").split(",").map(k=>k.trim()):[p.timelineName]:
[null],g={pin:a.hasAttribute("data-scroll-pin"),offset:a.getAttribute("data-scroll-offset")?a.getAttribute("data-scroll-offset"):void 0,duration:a.getAttribute("data-scroll-duration")?a.getAttribute("data-scroll-duration"):void 0,triggerHook:a.getAttribute("data-scroll-trigger")?parseFloat(a.getAttribute("data-scroll-trigger")):void 0,reset:"false"===a.getAttribute("data-scroll-reset")?!1:!0,horizontal:a.hasAttribute("data-scroll-horizontal")};a.hasAttribute("data-scroll-name")&&(g.scrollName=a.getAttribute("data-scroll-name"));
f&&(a.hasAttribute("data-scroll-action")&&(g.scrollCode=a.getAttribute("data-scroll-action")),a.hasAttribute("data-scroll-offset-action")&&(g.offsetCode=a.getAttribute("data-scroll-offset-action")),a.hasAttribute("data-scroll-duration-action")&&(g.durationCode=a.getAttribute("data-scroll-duration-action")),a.hasAttribute("data-scroll-trigger-action")&&(g.triggerHookCode=a.getAttribute("data-scroll-trigger-action")),a.hasAttribute("data-scroll-progress-action")&&(g.progressCode=a.getAttribute("data-scroll-progress-action")),
a.hasAttribute("data-scroll-enter-action")&&(g.enterCode=a.getAttribute("data-scroll-enter-action")),a.hasAttribute("data-scroll-leave-action")&&(g.leaveCode=a.getAttribute("data-scroll-leave-action")));a.hasAttribute("data-scroll-element-class")&&(g.elementClass=a.getAttribute("data-scroll-element-class"));a.hasAttribute("data-scroll-scene-class")&&(g.sceneClass=a.getAttribute("data-scroll-scene-class"));if(a.hasAttribute("data-scroll-properties")){const k=a.getAttribute("data-scroll-properties");
A("autoProperties")&&"false"==k||(g.properties=k)}else A("autoProperties")&&(g.properties=!0);a.getAttribute("data-indicator-color")&&(g.indicatorColor=a.getAttribute("data-indicator-color"));a.hasAttribute("data-indicator-force")&&(g.addIndicators=!0);r.forEach(k=>{C(b,a,k,g)})})}});window.HYPE_eventListeners.push({type:"HypeSceneUnload",callback:function(b,d){b=d.id;v[b]&&(v[b].forEach(f=>{f&&f.destroy(!0)}),v[b]=[],u[b]&&(u[b].forEach(f=>{f&&f.destroy(!0)}),u[b]=[]))}});return{version:"1.1.1",
setDefault:function(b,d){"object"==typeof b?p=b:p[b]=d},getDefault:A}}console.error("ScrollMagic is not available.")}());