digital-theory/js/animations_custom.js

// animation

/**
 * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
 */
let development_debug = false
// development_debug = true

let enable_animations = false
// enable_animations = true

const rotateYCard = '200deg'
const offsetCard = '10'

let innerWidth = window.innerWidth
if (document.onresize) {

	document.onresize(event => {
		innerWidth = window.innerWidth
		console.log('innerWidth', innerWidth)
	})
}

function animateCard (id, side) {

	console.log('animateCard', '#content-' + id + ' .flip-handle', side, offsetCard)
	const fromObject = {
		rotateY: rotateYCard,
		rotateX: '-10deg',
		// side: offsetCard
	}

	let toObject = {
		rotateY: 0,
		rotateX: 0,
		duration: 0.2,
		ease: 'easeInOut',
		// side: 1,
		scrollTrigger: {
			trigger: '#content-' + id + ' .flip-handle',
			start: 'top 80%',
			scrub: 1,
			markers: development_debug,
		}
	}
	fromObject[side] = 1
	toObject[side] = offsetCard

	gsap.fromTo('#content-' + id, fromObject,
		toObject)
}

if (enable_animations) {
	console.log('start animations')

	gsap.fromTo('#for_all_your', {
			opacity: 0,
			top: 100,
			scale: 0.5,
		},
		{
			opacity: 1,
			top: 0,
			scale: 1,
			duration: 0.25,
			scrollTrigger: {
				trigger: '#for_all_your',
				start: 'top bottom'
			}
		})
	gsap.fromTo('#for_all_your_2', {
			opacity: 0,
			scale: 0.5,
		},
		{
			opacity: 1,
			duration: 1,
			scale: 1,
			scrollTrigger: {
				trigger: '#for_all_your_2',
				delay: 0.4,
				start: 'top bottom'
			}
		})

	gsap.fromTo('#unlock, #unlock_white', {
			opacity: 0.1,
			// scale: 1,
		},
		{
			opacity: 1,
			// scale: 1.25,
			scrollTrigger: {
				trigger: '#unlock_white',
				delay: 1,
				scrub: 2,
				start: '+50% 80%'
			}
		})

	gsap.to('#main_title', {
		delay: 1,
		// xPercent: ()=>nav.offsetHeight,
		scrollTrigger: {
			trigger: '#main_title',
			scrub: 1,
			markers: development_debug,
		},
		top: innerWidth > 1300 ? '15vw' : '30vw',
		width: '-40vw',

	})

	gsap.fromTo('#hand',
		{
			top: -200,
			opacity: 1,
		},
		{
			top: 500,
			duration: 1,
			opacity: 0,
			scrollTrigger: {
				trigger: '#cover',
				scrub: 1,
				markers: development_debug,
			}
		})

	gsap.to('#phone-watches-1',
		{
			left: 500,
			top: -200,
			scale: 0.8,
			duration: 1.5,
			ease: 'sine',
			scrollTrigger: {
				trigger: '#welcome',
				scrub: 1,
				delay: 1,
				markers: development_debug,
			}
		})

	gsap.to('#phone-watches-2',
		{
			left: '50vw',
			top: 100,
			scale: 0.7,
			duration: 1.25,
			ease: 'sine',
			scrollTrigger: {
				trigger: '#welcome',
				scrub: 1,
				delay: 0.5,
				markers: development_debug,
			}
		})
	gsap.to('#phone-watches-3',
		{
			left: '50vw',
			top: 0,
			scale: 0.8,
			duration: 1.25,
			ease: 'sine',
			scrollTrigger: {
				trigger: '#welcome',
				scrub: 2,
				markers: development_debug,
			}
		})
	gsap.to('#phone-watches-4',
		{
			left: '50vw',
			top: -10,
			scale: 0.5,
			duration: 3,
			ease: 'sine',
			scrollTrigger: {
				trigger: '#welcome',
				scrub: 2,
				markers: development_debug,
			}
		})

	gsap.fromTo('#content_first',
		{
			scale: 0.5,
			opacity: 0.15,
		},
		{
			opacity: 1,
			scale: 0.9,
			ease: 'easeInOut',
			scrollTrigger: {
				trigger: '#content',
				scrub: 1,
				markers: development_debug,
			}
		})

	gsap.fromTo('#content_second',
		{
			scale: 0.8,
			left: -50,
			opacity: 0.15,
			top: -20,
		},
		{
			left: -40,
			top: -50,
			opacity: 1,
			duration: 2,
			scale: 1.5,
			ease: 'spline',
			scrollTrigger: {
				trigger: '#content',
				scrub: 0.5,
				markers: development_debug,
			}
		})

// le background coloré grandit légèrement
	gsap.fromTo('#content_all_img',
		{
			scale: 1,
			left: '-100'
		},
		{
			scale: 1.1,
			left: 0,
			ease: 'linear',
			scrollTrigger: {
				trigger: '#content_all .columns',
				scrub: 1,
				markers: development_debug,
			}
		})

	gsap.fromTo('#unlock',
		{
			marginTop: "0",
		},
		{
			marginTop: "-4px",
			ease: 'spline',
			scrollTrigger: {
				trigger: '#open-handle',

				markers: development_debug,
			}
		})
	gsap.fromTo('#unlock_white',
		{
			opacity: 0.5,
		},
		{
			opacity: 1,
			ease: 'spline',
			scrollTrigger: {
				trigger: '#open-handle',

				markers: development_debug,
			}
		})

// flip from right
	gsap.fromTo('#content-2', {
			rotateY: rotateYCard,
			right: offsetCard,
		},
		{
			rotateY: 0,
			right: 0,
			duration: 0.2,
			ease: 'easeInOut',
			scrollTrigger: {
				trigger: '#content-2 .flip-handle',
				scrub: 1,
				markers: development_debug,
			}
		})

	animateCard(2, 'right')
	animateCard(3, 'left')
	animateCard(4, 'right')
	animateCard(5, 'left')
}