https://fta.ca/_nuxt/BtwV654H.js

1import v from"./caji1Q1F.js";import{u as f,m as y}from"./DiZhURkQ.js";import{c as b,J as a,L as p,N as t,a3 as s,Q as o,F as m,W as u,R as l,u as _,a8 as c,I as e,_ as k}from"./wbHSvHwd.js";const x={class:"animationguide"},w={class:"section section--apparition section--apparition-simplified"},S={class:"section--apparition-simplified-block"},O={class:"section--apparition-simplified-block"},I={class:"section--apparition-simplified-block"},B={class:"section section--apparition section--apparition-stagger"},N=t("pre",{class:"section--apparition-stagger-block","data-appear-child":""},`				
2				name: appear-translate-in
3				target: child
4				childStaggerIn: 1000
5				childStaggerOut: 200
6		
7			`,-1),V=t("pre",{class:"section--apparition-stagger-block","data-appear-child":""},`				
8				name: appear-translate-in
9				target: child
10				childStaggerIn: 1000
11				childStaggerOut: 200
12		
13			`,-1),P=t("pre",{class:"section--apparition-stagger-block","data-appear-child":""},`				
14				name: appear-translate-in
15				target: child
16				childStaggerIn: 1000
17				childStaggerOut: 200
18		
19			`,-1),D=[N,V,P],E={class:"section section--apparition section--apparition-custom"},L=t("pre",{class:"section--apparition-custom-block section--apparition-custom-block--rotate"},`				name: appear-custom
20				duration: 1100
21			`,-1),T=t("pre",{class:"section--apparition-custom-block section--apparition-custom-block--scale"},`	name: appear-custom
22				duration: 1100`,-1),$=t("pre",{class:"section--apparition-custom-block section--apparition-custom-block--translate"},`	name: appear-custom
23				duration: 1100`,-1),q=[L,T,$],A={class:"section--trigger"},F={class:"animationguide--triggers"},G={class:"section section--apparition"},H=t("div",{style:{height:"100vh"}},null,-1),Y={class:"section section--scroll"},z={class:"section--scroll-block"},J=t("div",{class:"section--scroll-block-cube"},null,-1),M=t("div",{class:"section--scroll-block-keyframe"},null,-1),Q={class:"section section--parallax"},R={class:"section--parallax-block parallax"},W=`
24<p>v-appear is a tool that helps you make any element appear! It uses an IntersectionObserver (fast!) and css classes to make any sort of transition happen.</p>
25<p>Here's what a simple use case can look like : </p>
26<pre>&lt;div v-appear=&quot;'my-apparition'&quot;&gt;&lt;/div&gt;</pre>
27<p>The class can look like this for a translate and opacity on appear :</p>
28<pre>
29.my-apparition {
30	<span>// my-apparition-visible stays as long as the element is visible</span>
31	<span>// used to set element properties on show</span>
32	&-visible {
33		opacity: 1;
34		transform: translateY(0rem);
35	}
36
37	<span>// my-apparition-invisible stays as long as the element is invisible</span>
38	<span>// used to set element properties on hide</span>
39	&-invisible {
40		opacity: 0;
41		transform: translateY(2rem);
42	}
43	<span>// my-apparition-visible-active stays for the transition property duration</span>
44	<span>// or the set duration in v-appear parameters</span>
45	<span>// here it will be active for 0.8s (duration + delay = 0.6s + 0.2s = 0.8s)</span>
46	&-visible-active {
47		transition: 0.6s $Power2EaseOut all 0.2s;
48	}
49	<span>// my-apparition-invisible-active stays for the transition property duration</span>
50	<span>// or the set duration in v-appear parameters</span>
51	<span>// here it will be active for 0.6s</span>
52	&-invisible-active {
53		transition: 0.6s $Power2EaseOut all;
54	}
55}
56</pre>		
57`,tt={__name:"animationGuide",setup(j){f();const d=b(0);return(C,K)=>{const r=v,i=c("appear"),h=c("scroll-progress"),g=c("parallax");return e(),a("div",x,[p(r,{title:"AnimationGuide",text:W}),t("div",w,[s((e(),a("pre",S,[o(`				
58				name: appear-translate-in
59
60				style rules 
61				--transition-duration-in: 2s;
62				--transition-delay-in: 0.2s;
63				--transition-duration-out: 1s;
64				--transition-delay-out: 2s;
65	
66			`)])),[[i,{name:"appear-translate-in",once:!1}]]),s((e(),a("pre",O,[o(`				
67				name: appear-translate-in
68				
69				style rules 
70				transition-duration: 0.2s;
71				transition-delay: 2s;
72
73			`)])),[[i,{name:"appear-translate-in",once:!1}]]),s((e(),a("pre",I,[o(`				
74				name: appear-translate-in
75				
76				style rules 
77				--transition-delay-in: 0.2s;
78			
79			`)])),[[i,{name:"appear-translate-in",once:!1}]])]),s((e(),a("div",B,D)),[[i,{name:"appear-translate-in-stagger",target:"child",once:!1,childStaggerIn:1e3,childStaggerOut:200}]]),s((e(),a("div",E,q)),[[i,{name:"appear-custom",once:!1,duration:1100,trigger:"50%"}]]),t("div",A,[t("div",F,[(e(),a(m,null,u(5,n=>t("div",{class:"animationguide--triggers-trigger",style:k({"--index":n-.5})},[t("span",null,l(100-(n-.5)*20)+"%",1)],4)),64))]),(e(),a(m,null,u(5,n=>s(t("div",G,[o(" Triggers when it reaches "+l(100-(6-n-.5)*20)+"% of the viewport ",1)]),[[i,{name:"appear-translate-in",duration:0,once:!1,trigger:100-(6-n-.5)*20+"%"}]])),64)),H]),p(r,{title:"Scroll"}),s((e(),a("div",Y,[t("div",z,[t("span",null,l(_(d)),1),J,M])])),[[h,{debug:!0,startOffsetByViewport:"0vh",endOffsetByViewport:"-100vh",wat

79ch:n=>{d.value=_(y).clampedMapLinear(n,0,1,0,-100)}}]]),t("div",Q,[p(r,{title:"Parallax"}),s(t("div",R,null,512),[[g]])])])}}};export{tt as default};