├── .vscode └── settings.json ├── index.html └── script.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 53 | 54 | 55 |
56 |
57 |
Link 1
58 |
Link 2
59 |
Link 3
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 | 69 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // gsap.from('.header', { duration: 1, y: '-100%', ease: 'bounce' }) 2 | // gsap.from('.link', { duration: 1, opacity: 0, delay: 1, stagger: .5 }) 3 | // gsap.from('.right', { duration: 1, x: '-100vw', delay: 1, ease: 'power2.in' }) 4 | // gsap.from('.left', { duration: 1, delay: 1.5, x: '-100%' }) 5 | // gsap.to('.footer', { duration: 1, y: 0, ease: 'elastic', delay: 2.5 }) 6 | // gsap.fromTo('.button', { opacity: 0, scale: 0, rotation: 720 }, { duration: 1, delay: 3.5, opacity: 1, scale: 1, rotation: 0 }) 7 | 8 | const timeline = gsap.timeline({ defaults: { duration: 1 }}) 9 | timeline 10 | .from('.header', { y: '-100%', ease: 'bounce' }) 11 | .from('.link', { opacity: 0, stagger: .5 }) 12 | .from('.right', { x: '-100vw', ease: 'power2.in' }, 1) 13 | .from('.left', { x: '-100%' }, '<.5') 14 | .to('.footer', { y: 0, ease: 'elastic' }) 15 | .fromTo('.button', { opacity: 0, scale: 0, rotation: 720 }, { opacity: 1, scale: 1, rotation: 0 }) 16 | 17 | const button = document.querySelector('.button') 18 | 19 | button.addEventListener('click', () => { 20 | timeline.timeScale(3) 21 | timeline.reverse() 22 | }) --------------------------------------------------------------------------------