Snippets Collections
let widthContianer = container.clientWidth;
			const tl = gsap.timeline({
				scrollTrigger: {
					trigger: container,
					pin: true,
					scrub: 0.5,
					start: 'top 20%',
					end: `${(widthContianer * 3) / 2}`,
					invalidateOnRefresh: true,
				},
			});
let Wid = window.innerWidth;

		if (Wid > 1199) {
			const section = document.querySelector('.services .services-main');
			const wrapper = document.querySelector('.services .container');
			const wrapperInner = document.querySelector('.services__wrapper-inner');
			const oneCard = document.querySelector('.services__content');

			const totalWidth = wrapperInner.scrollWidth - wrapper.clientWidth;
			const startTrigger = $('.services .row').hasClass('first-row')
				? 'top -=30%top'
				: 'top top';
			const gsapConfig = {
				x: () => {
					return -(
						wrapper.scrollWidth -
						window.innerWidth +
						window.innerWidth * 0.05 +
						(window.innerWidth / 2 - oneCard.offsetWidth / 2)
					);
				},

				scrollTrigger: {
					trigger: section,
					start: startTrigger,
					end: 'bottom top',
					scrub: 1,
					pin: true,
					pinSpacing: true,
					markers: false,
				},
			};
			gsap.to(wrapperInner, gsapConfig);
			ScrollTrigger.refresh();

			let navWidth = 0;
			let maxScrollerWidth = totalWidth;

			function slideAnim(e) {
				e.preventDefault();
				let direction = 1;
				if ($(this).hasClass('next-btn')) {
					direction = 1;
				} else if ($(this).hasClass('prev-btn')) {
					direction = -1;
				}

				navWidth += direction * innerWidth;

				navWidth = Math.max(0, Math.min(navWidth, maxScrollerWidth));

				gsap.to(wrapperInner, {
					duration: 0.8,
					x: -navWidth,
					ease: 'power3.out',
				});
			}

			document.querySelector('.prev-btn').addEventListener('click', slideAnim);
			document.querySelector('.next-btn').addEventListener('click', slideAnim);
		}
	this.$burger = this.$element.find('.header__burger');
			this.$navBodyItems = this.$element.find(
				'.header__popup-menu .col-lg-3.col-md-6.col-12',
			);

			const tl = gsap.timeline();
			tl.fromTo(
				this.$navBodyItems,
				{ opacity: 0, y: -500 },
				{ opacity: 1, y: 0, duration: 1 },
			);

			this.$burger.on('click', (event) => {
				event.preventDefault();
				if (tl.reversed()) {
					tl.play();
				} else {
					tl.reverse();
				}
			});
//rpf のgsap スライド

const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
const listEl = document.querySelector('.side-scroll-list');

gsap.to(listEl, {
  x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.side-scroll',
    start: 'top 20%',
    end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
    scrub: true,
    pin: true,
    anticipatePin: 1,
    invalidateOnRefresh: true,
    onUpdate: (scrollTrigger) => {
      const activeIndex = Math.round(scrollTrigger.progress * (listEl.children.length - 1));
      yourOtherFunction(activeIndex);
    },
  },
});



function yourOtherFunction(activeIndex) {
  const myList = document.querySelectorAll('.side-scroll-list li');
  const variableToCompare = activeIndex;

  myList.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('active');
    }
    else {
      item.classList.remove('active');
    }
  });
  const myList2 = document.querySelectorAll('.side-scroll-status li');
  myList2.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('current');
    }
    else {
      item.classList.remove('current');
    }
  });
}

<div class="side-scroll-container container">
    <div class="side-scroll-list-wrapper">
        <ul class="side-scroll-list">
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
        </ul>
    </div>
    <ul class="side-scroll-status">
        <li class="side-scroll-status-item current"><span>1</span></li>
        <li class="side-scroll-status-item"><span>2</span></li>
        <li class="side-scroll-status-item"><span>3</span></li>
        <li class="side-scroll-status-item"><span>4</span></li>
        <li class="side-scroll-status-item"><span>5</span></li>
        <li class="side-scroll-status-item"><span>6</span></li>
        <li class="side-scroll-status-item"><span>7</span></li>
        <li class="side-scroll-status-item"><span>8</span></li>
        <li class="side-scroll-status-item"><span>9</span></li>
    </ul>
</div>
always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=${PRIVJS_TOKEN}
star

Fri Aug 02 2024 09:40:49 GMT+0000 (Coordinated Universal Time)

#jquery #gsap
star

Fri Jul 05 2024 10:07:05 GMT+0000 (Coordinated Universal Time)

#jquery #gsap
star

Mon May 27 2024 09:28:28 GMT+0000 (Coordinated Universal Time)

#jquery #gsap
star

Fri Feb 16 2024 09:09:48 GMT+0000 (Coordinated Universal Time)

#javascript #gsap
star

Fri Feb 16 2024 09:08:03 GMT+0000 (Coordinated Universal Time)

#html #gsap
star

Sun Oct 22 2023 15:22:47 GMT+0000 (Coordinated Universal Time) https://gsap.com/docs/v3/Installation/guides/Club GSAP

#gsap #greensock #install

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension