https://nonokaze-resort.com/common/new/js/scrollaccordion.js

1$(function ($) {
2	/**
3	 * @classdesc スクロールアコーディオン
4	 */
5	let windowWidth = document.documentElement.clientWidth;
6	gsap.registerPlugin(ScrollTrigger);
7
8	const knowLedgePin = $('.facilities .facilities_wrap').clone();
9
10	let scrollAccordionTl;
11
12	scrollAccordion();
13	
14	function scrollAccordion() {
15		if(windowWidth < 1000) return
16
17		scrollAccordionTl = gsap.timeline({
18			scrollTrigger: {
19				trigger: '.facilities_wrap',
20				pin: true,
21				start: 'top top',
22				end: 'bottom top',
23				scrub: 0.5,
24				ease: 'linear',
25			}
26		});
27	
28		scrollAccordionTl.to('.fac_item01 .-dtl', {
29			height: 0,
30			paddingBottom: 0,
31			opacity: 0,
32			delay: 0.6,
33		})
34		.from('.fac_item02 .-dtl', {
35			height: 0,
36			paddingBottom: 0,
37			opacity: 0,
38		}, '<')
39		.from('.fac_img_item02', {
40			y: 1000,
41		}, '<')
42		.to('.fac_item02 .-dtl', {
43			height: 0,
44			paddingBottom: 0,
45			opacity: 0,
46			delay: 0.6,
47		})
48		.from('.fac_item03 .-dtl', {
49			height: 0,
50			paddingBottom: 0,
51			opacity: 0,
52		}, '<')
53		.from('.fac_img_item03', {
54			y: 1000,
55		}, '<');
56	}
57
58	function resetPosition() {
59    const knowLedgeClone = facilities.clone();
60		if(scrollAccordionTl) {
61			scrollAccordionTl.kill();
62		}
63    $('#facilities .pin-spacer').remove();
64		$('#facilities .facilities_wrap').remove();
65		
66		$('#facilities').append(knowLedgeClone);
67
68		$('#facilities').promise().done(function() {
69			scrollAccordion();
70		})
71	}	
72
73});