SOURCE

console 命令行工具 X clear

                    
>
console
gsap.registerPlugin(ScrollTrigger)
const fauxView = document.querySelector('.fauxView')
const liquid = document.querySelector('.liquid')
const liquidDark = document.querySelector('.liquidDark')
const viewBox = document.getElementById('viewBox')
const responsible = document.querySelectorAll('.responsibly > *')

const intro = gsap.timeline({})
const fill = gsap.timeline({})
const scrollText = gsap.timeline({ paused: true })
const drink = gsap.timeline({})
const fin = gsap.timeline({})

intro
	.fromTo('.bgImg', { opacity: 0, x: -100 }, { x: 0, opacity: 0.1, duration: 0.75 })
	.fromTo(responsible, { autoAlpha: 0, y: -100 }, { autoAlpha: 1, y: 0, stagger: 0.2, duration: 0.75 }, '<')
	.add('hide')
	.fromTo(responsible[2], { autoAlpha: 1, y: 0 }, { autoAlpha: 0, y: -15, duration: 0.75, yoyo: true, repeat: 9 })

scrollText
	.fromTo('.scrollText', { autoAlpha: 0, x: -50 }, { autoAlpha: 1, x: 0, duration: 0.5, ease: 'bounce.out' }, '>+0.35')
	.set(fauxView, { overflowY: 'scroll' })
	.to('.scrollText', { autoAlpha: 0, x: -50, duration: 1, ease: 'bounce.in' }, '+=1.25')

//prettier-ignore
drink
.add('start')
.fromTo(liquid, { x: -420, y: 70 }, { y: 370 }, 'start')
.fromTo(liquidDark, { x: -50, y: 60 }, { y: 376 }, 'start')

fill
	.set(liquid, { visibility: 'visible' })
	.add('start')
	.fromTo(liquid, { x: 190, y: 550 }, { x: -420, y: 70, duration: 2, ease: 'sine.out' }, 'start')
	.set(liquidDark, { visibility: 'visible' }, 'start+=0.20')
	.fromTo(liquidDark, { x: -600, y: 500 }, { x: -50, y: 60, duration: 1.85, ease: 'sine.out' }, 'start+=0.20')
//prettier-ignore
fin
	.fromTo('.bgImg', { opacity: 0, x: -100 }, { x: 0, opacity: 0.1, duration: 0.5 })
	.fromTo('.greensockIcon', {autoAlpha: 0, y: 20}, {autoAlpha: 1, y:0, duration: 0.5}, '<')

//intro
ScrollTrigger.create({
	trigger: '.responsibly',
	animation: intro,
	//pin: true,
	start: '49% center',
	end: '51% center',
	toggleActions: 'play none play none',
	onLeave: () => intro.reverse('hide'),
	//onEnterBack: () => intro.play(),
	//markers: true,
})
ScrollTrigger.create({
	trigger: '.teamwork',
	animation: gsap.to('.teamwork', { autoAlpha: 0, y: -100 }),
	//pin: true,
	start: 'bottom 38%',
	end: 'bottom 38%',
	toggleActions: 'play none none reverse',
	//markers: true,
})

//drink up
ScrollTrigger.create({
	trigger: fauxView,
	pin: fauxView,
	start: 'center center',
	end: '+=550 top',
})

ScrollTrigger.create({
	trigger: viewBox,
	animation: drink,
	scroller: fauxView,
	pin: true,
	start: 'top top',
	end: '+=1501 99%',
	scrub: 1,
	//markers: true,
})

ScrollTrigger.create({
	trigger: viewBox,
	animation: fill,
	start: 'center center',
	end: 'bottom center',
	toggleActions: 'play none none reverse',
	//markers: true,
	//onEnter: ({ progress, direction, isActive }) => console.log(progress, direction, isActive),
	onEnterBack: () => ((fauxView.scrollTop = 0), scrollText.restart().pause()),
	onLeave: () => {
		scrollText.play()
		// console.log('can drink')
		// fauxView.style.overflow = 'scroll'
	},
})

//fin
ScrollTrigger.create({
	trigger: '.end',
	animation: fin,
	start: 'top 10%',
	toggleActions: 'play none none reverse',
})
main
	img.bgImg(src="https://b1m1nd.github.io/gsapScroll/images/logo-man.svg", alt="")
	.scrollMe.grid
		.responsibly
			h1.center Please Scroll 
				span Responsibly
			p 
				b ScrollTrigger  
				| a no hijack scroll plugin from GSAP! 
			h1
				span
					i.fas.fa-chevron-circle-down
	.grid
		.teamwork
			h2 
				span Your team worked hard
			h1 have a drink!
		.fauxView
			.svg
				svg#viewBox(width='302', height='431', viewBox='0 0 302 431', fill='none', xmlns='http://www.w3.org/2000/svg')
					mask#liquidMask
						path(d='M11 65C116.998 85.387 172.287 89.0331 292 70.5076C273.968 209.199 250.927 417.986 250.426 421.992C249.925 425.997 245.5 428 242.913 428C240.325 428 69.6043 428 67.0998 428C64.5954 428 60.0873 425.497 59.5865 421.992L11 65Z', fill='#F9C749')
					path.scrollText(d='M278.065 364.44C277.681 364.392 277.37 364.49 277.132 364.736C276.89 364.981 276.611 365.441 276.296 366.118C275.976 366.794 275.68 367.324 275.406 367.708C274.658 368.752 273.772 369.21 272.745 369.08C272.212 369.013 271.756 368.803 271.378 368.452C270.995 368.096 270.722 367.623 270.558 367.033C270.394 366.438 270.357 365.79 270.445 365.089C270.535 364.384 270.743 363.772 271.07 363.253C271.393 362.733 271.807 362.351 272.311 362.107C272.815 361.859 273.364 361.772 273.956 361.847L273.699 363.881C273.247 363.824 272.878 363.922 272.594 364.176C272.304 364.428 272.127 364.813 272.062 365.328C271.999 365.825 272.056 366.225 272.234 366.528C272.407 366.83 272.666 367.003 273.009 367.046C273.33 367.087 273.62 366.96 273.877 366.667C274.135 366.369 274.399 365.917 274.668 365.313C275.163 364.2 275.701 363.411 276.284 362.947C276.866 362.483 277.541 362.3 278.31 362.397C279.164 362.505 279.795 362.913 280.202 363.622C280.604 364.329 280.735 365.23 280.597 366.324C280.501 367.084 280.276 367.758 279.921 368.347C279.562 368.936 279.12 369.365 278.594 369.633C278.069 369.898 277.488 369.99 276.85 369.909L277.108 367.868C278.198 368.005 278.825 367.423 278.99 366.121C279.051 365.637 279.002 365.248 278.841 364.952C278.677 364.655 278.418 364.485 278.065 364.44ZM280.19 356.848C280.235 356.487 280.173 356.18 280.003 355.929C279.832 355.678 279.583 355.527 279.254 355.476L279.486 353.638C279.983 353.705 280.423 353.899 280.805 354.218C281.182 354.537 281.457 354.944 281.629 355.439C281.797 355.928 281.845 356.453 281.774 357.014C281.642 358.063 281.205 358.848 280.463 359.37C279.718 359.892 278.757 360.078 277.582 359.929L277.453 359.913C276.322 359.77 275.458 359.355 274.861 358.669C274.263 357.982 274.031 357.115 274.163 356.066C274.279 355.148 274.634 354.446 275.229 353.961C275.819 353.471 276.549 353.276 277.418 353.376L277.185 355.214C276.804 355.175 276.482 355.254 276.218 355.45C275.95 355.646 275.793 355.929 275.746 356.3C275.688 356.757 275.812 357.124 276.117 357.401C276.417 357.674 276.941 357.857 277.687 357.951L277.89 357.977C278.645 358.072 279.203 358.026 279.562 357.837C279.921 357.648 280.13 357.318 280.19 356.848ZM277.361 346.632C277.291 346.894 277.243 347.127 277.217 347.33C277.124 348.072 277.313 348.59 277.786 348.884L282.588 349.491L282.34 351.451L275.002 350.523L275.236 348.671L276.118 348.728C275.494 348.249 275.226 347.662 275.314 346.966C275.341 346.749 275.396 346.549 275.479 346.366L277.361 346.632ZM279.35 345.066C278.622 344.974 277.991 344.752 277.457 344.399C276.923 344.047 276.533 343.589 276.287 343.025C276.042 342.456 275.964 341.824 276.052 341.128C276.177 340.138 276.582 339.369 277.267 338.821C277.952 338.27 278.819 338.023 279.868 338.082L280.372 338.132C281.497 338.275 282.362 338.703 282.965 339.418C283.564 340.132 283.797 341.018 283.663 342.076C283.529 343.134 283.083 343.937 282.325 344.484C281.567 345.027 280.605 345.224 279.439 345.077L279.35 345.066ZM279.741 343.124C280.437 343.212 280.987 343.148 281.391 342.933C281.79 342.717 282.021 342.365 282.083 341.876C282.143 341.402 282.009 341.008 281.681 340.696C281.348 340.383 280.782 340.175 279.981 340.074C279.299 339.988 278.753 340.054 278.344 340.274C277.935 340.493 277.7 340.845 277.639 341.328C277.578 341.808 277.719 342.202 278.061 342.512C278.399 342.821 278.958 343.025 279.741 343.124ZM284.556 333.922L284.307 335.889L273.89 334.572L274.139 332.605L284.556 333.922ZM285.198 328.844L284.949 330.81L274.532 329.493L274.781 327.527L285.198 328.844ZM277.346 317.484L279.15 317.712L279.309 316.457L280.746 316.639L280.588 317.894L284.25 318.357C284.521 318.391 284.722 318.364 284.853 318.274C284.984 318.185 285.068 317.994 285.105 317.7C285.132 317.483 285.141 317.289 285.13 317.117L286.615 317.305C286.684 317.704 286.693 318.107 286.642 318.514C286.468 319.889 285.685 320.502 284.294 320.354L280.34 319.854L280.204 320.925L278.767 320.743L278.902 319.672L277.098 319.444L277.346 317.484ZM283.159 314.94C282.431 314.848 281.8 314.626 281.266 314.274C280.732 313.921 280.342 313.463 280.096 312.899C279.851 312.331 279.772 311.699 279.86 311.002C279.986 310.012 280.39 309.243 281.075 308.696C281.761 308.144 282.628 307.898 283.677 307.957L284.18 308.007C285.306 308.149 286.171 308.578 286.774 309.292C287.373 310.007 287.605 310.893 287.471 311.951C287.338 313.009 286.892 313.811 286.133 314.359C285.376 314.901 284.414 315.099 283.247 314.951L283.159 314.94ZM283.549 312.998C284.246 313.086 284.796 313.023 285.2 312.807C285.599 312.591 285.829 312.239 285.891 311.751C285.951 311.276 285.817 310.883 285.489 310.57C285.157 310.257 284.59 310.05 283.79 309.949C283.107 309.862 282.562 309.929 282.153 310.148C281.744 310.368 281.508 310.719 281.447 311.203C281.387 311.682 281.528 312.077 281.87 312.386C282.207 312.695 282.767 312.899 283.549 312.998ZM288.732 300.889L278.858 299.64L279.242 296.602C279.352 295.734 279.646 294.983 280.126 294.35C280.602 293.712 281.225 293.247 281.997 292.954C282.765 292.66 283.608 292.572 284.525 292.688L284.98 292.745C285.898 292.861 286.69 293.154 287.356 293.624C288.023 294.09 288.51 294.691 288.816 295.428C289.123 296.165 289.224 296.966 289.119 297.83L288.732 300.889ZM280.763 297.814L287.355 298.647L287.479 297.664C287.58 296.868 287.397 296.227 286.93 295.741C286.463 295.255 285.747 294.946 284.78 294.815L284.258 294.749C283.254 294.622 282.468 294.734 281.9 295.084C281.328 295.435 280.991 296.01 280.89 296.81L280.763 297.814ZM285.055 285.776C284.985 286.038 284.937 286.271 284.911 286.475C284.818 287.216 285.007 287.734 285.48 288.028L290.281 288.635L290.034 290.595L282.695 289.667L282.93 287.816L283.811 287.872C283.187 287.393 282.919 286.806 283.007 286.11C283.035 285.893 283.09 285.693 283.173 285.511L285.055 285.776ZM291.112 282.065L290.863 284.031L283.525 283.104L283.774 281.137L291.112 282.065ZM281.612 282.979C281.318 282.942 281.088 282.814 280.923 282.595C280.758 282.372 280.697 282.091 280.74 281.752C280.782 281.418 280.911 281.163 281.126 280.988C281.341 280.813 281.596 280.744 281.89 280.781C282.188 280.819 282.419 280.952 282.583 281.179C282.748 281.402 282.81 281.679 282.768 282.009C282.726 282.339 282.598 282.594 282.382 282.773C282.167 282.948 281.91 283.017 281.612 282.979ZM284.383 276.323L285.238 276.369C284.649 275.762 284.41 275.017 284.521 274.136C284.62 273.358 284.921 272.808 285.426 272.486C285.93 272.164 286.638 272.056 287.548 272.162L292.288 272.761L292.04 274.721L287.347 274.128C286.931 274.075 286.619 274.128 286.411 274.285C286.198 274.442 286.065 274.73 286.012 275.151C285.942 275.703 286.125 276.146 286.561 276.481L291.735 277.135L291.487 279.095L284.149 278.168L284.383 276.323ZM290.046 266.843L290.662 267.637L292.9 267.92L292.652 269.88L282.235 268.563L282.483 266.603L288.255 267.333L287.814 266.891L285.848 264.734L286.145 262.381L288.869 265.419L293.512 263.078L293.228 265.329L290.046 266.843Z', fill='white')
					g(mask="url(#liquidMask)")
						path.liquidDark(d='M741 7.55371C632.71 2.60175 660.5 23.1272 580 42.6272C437 66.6272 518.7 -26.4209 350.505 7.55371C182.31 41.5283 143.495 41.5283 0 7.55371V420.627H741V7.55371Z', fill='#F9A849')
						path.liquid(d='M0 7.92651C108.29 2.97454 80.5 23.5 161 43C304 67 222.3 -26.0481 390.495 7.92651C558.69 41.9011 597.505 41.9011 741 7.92651V421H0V7.92651Z', fill='#F9C749')
					g.glass
						path(d='M300 20C300 20.3018 299.739 21.1284 297.853 22.3534C296.072 23.5103 293.314 24.7015 289.573 25.8769C282.12 28.2186 271.232 30.3554 257.656 32.1596C230.533 35.764 193 38 151.5 38C110 38 72.4674 35.764 45.3439 32.1596C31.7676 30.3554 20.8797 28.2186 13.4265 25.8769C9.68569 24.7015 6.92843 23.5103 5.14692 22.3534C3.26066 21.1284 3 20.3018 3 20C3 19.6982 3.26066 18.8716 5.14692 17.6466C6.92843 16.4897 9.68569 15.2985 13.4265 14.1231C20.8797 11.7814 31.7676 9.6446 45.3439 7.84044C72.4674 4.23598 110 2 151.5 2C193 2 230.533 4.23598 257.656 7.84044C271.232 9.6446 282.12 11.7814 289.573 14.1231C293.314 15.2985 296.072 16.4897 297.853 17.6466C299.739 18.8716 300 19.6982 300 20Z', fill='#e5e5e5', fill-opacity='0.3', stroke='white', stroke-width='4')
						path(d='M2.5 20L57.3165 420.357C57.9946 425.309 62.2255 429 67.2241 429H242.116C247.183 429 251.449 425.21 252.046 420.178L299.5 20', stroke='white', stroke-width='4')
						path(d='M226 37.5C250.5 35.5 272 34 297 25.5L250.5 422C249.5 425.5 247.815 426.656 244 428H190L226 37.5Z', fill='#e5e5e5', fill-opacity='0.45')
						path(d='M226.5 37.5C154.5 41.5 60.5 42.5 6 26L59.5 421.5C61.0487 425 61.0918 426.656 67 428H189L226.5 37.5Z', fill='#e5e5e5', fill-opacity='0.30')
			.spacer
	.scrollMe
		.grid.end
			p Thank you Team GreenSock and everyone that helped make scrolling animations awesome!
			a.greensockIcon(href='https://greensock.com/scrolltrigger')
				img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg', width='300', height='164')
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway&display=swap');
//- //< Sassy settings
$minWidthLg: 1000px;
$minWidthMed: 800px;
$minWidthSml: 420px;
//- //>Base settings
:root {
	--color: #fff;
	--color2: #000;
	--greenSock: #88ce02;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	color: black;
	font-family: 'Lato', sans-serif;
	background: skyblue;
}

a {
	text-decoration: none;
	cursor: pointer;
}

img {
	max-width: 100%;
}

ul {
	list-style: none;
}

h1 {
	color: black;
	font-size: 3rem;
}

h1,
h2 {
	font-family: 'Raleway', sans-serif;
}

span {
	display: inline-block;
	//color: var(--greenSock);
	color: white;
}

main {
	position: relative;
	.bgImg {
		width: 100%;
		position: fixed;
		top: 200px;
		left: 15%;
		//visibility: hidden;
		opacity: 0;
		z-index: -420;
		@media (max-width: $minWidthSml) {
			min-width: 125%;
			top: 50px;
			left: 0;
		}
	}
	//background: url('') no-repeat top fixed;
}
.center {
	text-align: center;
}

.scrollMe {
	height: 100vh;
}
.grid {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
	text-align: center;
}
.fauxView, #viewBox {
	will-change: transform;
}

.fauxView {
	width: 305px;
	height: 500px;
	overflow-x: hidden;
	overflow-y: hidden;
	//gg browsers .. hide scrollBars x5
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-appearance: none;
	&::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
		-webkit-appearance: none;
	}
}

.liquid,
.liquidDark,
.scrollText {
	visibility: hidden;
}

.greensockIcon {
	margin-top: 6rem;
	padding: 0 1rem;
	visibility: hidden;
	background: rgba(0, 0, 0, 1);
	border-radius: 1rem;
	border: 2px solid var(--greenSock);
	box-shadow: 0 0 1px 4px rgba(0, 0, 0, 1);
}

本项目引用的自定义外部资源