orisoxin/utils/animations.js

export const fadeInAnimation = $gsap => {
	/////////////////////////////////////// class 1 animation
	const fadeInElements = $('.anim-fadeIn')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 95%'
					}
				})
				.from($(fadeInElements[item]), { y: 30, opacity: 0, duration: 0.3, stagger: 5 })
		}
	})
}

export const fadeInStaggerAnimation = $gsap => {
	const fadeInElements = $('.anim-fadeInStagger')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), { y: 30, opacity: 0, duration: 0.3, stagger: 0.2 })
		}
	})
}

export const leftToRightAnimation = $gsap => {
	const fadeInElements = $('.anim-leftToRight')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), { x: -300, opacity: 0, duration: 0.7 })
		}
	})
}

export const leftToRightStaggerAnimation = $gsap => {
	const fadeInElements = $('.anim-leftToRightStagger')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			this.$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), {
					x: 30,
					opacity: 0,
					duration: 0.3,
					stagger: 0.2
				})
		}
	})
}

export const rightToLeftAnimation = $gsap => {
	const fadeInElements = $('.anim-RightToLeft')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), { x: 300, opacity: 0, duration: 0.7 })
		}
	})
}

export const numberAnimation = $gsap => {
	const fadeInElements = $('.anim-number')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), {
					textContent: 0,
					duration: 0.5,
					ease: 'power1.in',
					snap: { textContent: 1 },
					stagger: 1
				})
		}
	})
}

export const progressAnimation = $gsap => {
	const fadeInElements = $('.anim-progress')
	Object.keys(fadeInElements).forEach((item, index) => {
		if (index < fadeInElements.length) {
			$gsap
				.timeline({
					scrollTrigger: {
						trigger: $(fadeInElements[item]),
						start: 'top 80%'
					}
				})
				.from($(fadeInElements[item]), { width: 0, opacity: 0, duration: 0.5 })
		}
	})
}