Last active
August 3, 2023 16:08
-
-
Save Saoming/f1e8eabd2d90aef56dc32e1baa561421 to your computer and use it in GitHub Desktop.
GSAP & Lenis Example Homepage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const lenis = new Lenis({ | |
| duration: 1.2, | |
| easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), | |
| direction: 'vertical', // vertical, horizontal | |
| gestureDirection: 'vertical', // vertical, horizontal, both | |
| smooth: true, | |
| mouseMultiplier: 1, | |
| smoothTouch: false, | |
| touchMultiplier: 2, | |
| infinite: false, | |
| }) | |
| function raf(time) { | |
| lenis.raf(time) | |
| requestAnimationFrame(raf) | |
| } | |
| requestAnimationFrame(raf) | |
| // starting gsap | |
| gsap.registerPlugin(ScrollTrigger); | |
| const tl = gsap.timeline(); | |
| tl.from("#hero-section .hero-title", { // selector text, Array, or object | |
| y: "1.5rem", | |
| duration: 0.3, | |
| ease: Power1.easeInOut, | |
| opacity: 0, | |
| }).from("#hero-section .hero-paragraph", { // selector text, Array, or object | |
| y: "1.5rem", | |
| stagger: .3, | |
| ease: Power1.easeInOut, | |
| opacity: 0, | |
| }).from("#hero-section .global-btn", { // selector text, Array, or object | |
| y: "1.5rem", | |
| stagger: .3, | |
| ease: Power1.easeInOut, | |
| opacity: 0, | |
| }); | |
| tl.from("#hero-home-patterns", { // selector text, Array, or object | |
| y: 50, | |
| duration: 0.3, | |
| ease: Power1.easeInOut, | |
| opacity: 0, | |
| }); | |
| // hero section | |
| const tl2 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#hero-background', | |
| start: '+=80', | |
| end: 'bottom 50px', | |
| scrub: true, | |
| } | |
| }); | |
| tl2.to('#hero-background', { | |
| scaleX: 0.9, | |
| borderBottomLeftRadius: '100px', | |
| borderBottomRightRadius: '100px', | |
| }); | |
| // section 3 | |
| const tl3 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#section-1', | |
| scrub: true, | |
| } | |
| }); | |
| tl3.from('#section-1', { | |
| y: 200, | |
| duration: 0.55, | |
| opacity: 0, | |
| }); | |
| // section 4 | |
| const tl4 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#section-4', | |
| start: "top 90px", | |
| end: "top 120px", | |
| } | |
| }); | |
| tl4.from('#section-4 #mission-left', { | |
| x: -200, | |
| duration: 0.45, | |
| opacity: 0, | |
| }); | |
| tl4.from('#section-4 #mission-right', { | |
| x: 200, | |
| duration: 0.45, | |
| opacity: 0, | |
| }); | |
| // section 5 desktop | |
| const texts = gsap.utils.toArray('.core-value-text'); | |
| const boxes = gsap.utils.toArray('.core-values-box-container > article'); | |
| const images = gsap.utils.toArray('.core-values-box-container > .core-values-img'); | |
| let mm = gsap.matchMedia(); | |
| const maintimeline = gsap.timeline({ | |
| defaults: { | |
| //add stagger to all tweens | |
| stagger: 2, | |
| } | |
| }); | |
| gsap.set(boxes, { | |
| opacity: 0, scale: 0, x: '1.5rem', transformOrigin: 'right', | |
| }); | |
| gsap.set(images, { | |
| opacity: 0, x: -200 | |
| }); | |
| mm.add("(min-width: 1024px)", () => { | |
| maintimeline.to(texts, { | |
| duration: 0.2, | |
| color: '#267e57' | |
| }) | |
| maintimeline.to(texts, { | |
| duration: 0.2, | |
| color: '#c4c4c4' | |
| }, '<+2') | |
| maintimeline.to(boxes, { | |
| duration: 1, | |
| opacity: 1, | |
| scale: 1, | |
| x: 0 | |
| }, 0 | |
| ) | |
| maintimeline.to(boxes, { | |
| opacity: 0, | |
| }, '<+2') | |
| maintimeline.to(images, { | |
| duration: 1, | |
| opacity: 1, | |
| }, 0) | |
| maintimeline.to(images, { | |
| opacity: 0, | |
| x: 0 | |
| }, '<+2') | |
| ScrollTrigger.create({ | |
| trigger: "#section-5", // you can use ID's in a tween, | |
| end: "+=3000 bottom", | |
| scrub: 1, | |
| pin: true, | |
| // markers: true, | |
| animation: maintimeline, | |
| }) | |
| }); | |
| // section 5 mobile | |
| const boxes_m = gsap.utils.toArray('.core-value-box-mobile-container > article'); | |
| const tlMobile = gsap.timeline({ | |
| defaults: { | |
| //add stagger to all tweens | |
| ease: "none", | |
| } | |
| }); | |
| mm.add("(max-width: 1023px)", () => { | |
| tlMobile.to(boxes_m, { | |
| yPercent: -100 * (boxes_m.length - 1), | |
| } | |
| ) | |
| ScrollTrigger.create({ | |
| trigger: "#section-5-mobile", // you can use ID's in a tween, | |
| scrub: 1, | |
| pin: "#section-5-mobile", | |
| snap: 1 / (boxes_m.length - 1), | |
| pinSpacing: false, | |
| end: 'bottom bottom', | |
| // markers: true, | |
| animation: tlMobile, | |
| }) | |
| }) | |
| // section 6 | |
| const tl6 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#section-6', | |
| start: '+=100px bottom', | |
| // markers: true, | |
| }, | |
| }); | |
| tl6.from('#story-img',{ | |
| x: 200, | |
| duration: 0.25, | |
| opacity: 0, | |
| ease: Power3.easeInOut, | |
| }); | |
| tl6.from('#story-heading-wrapper',{ | |
| x: -200, | |
| duration: 0.25, | |
| opacity: 0, | |
| ease: Power3.easeInOut, | |
| }).from('#story-block-list', { | |
| y: 200, | |
| duration: 0.35, | |
| opacity: 0, | |
| ease: Power3.easeInOut, | |
| }); | |
| // section 7 | |
| const tl7 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#section-7', | |
| start: '+=125px bottom', | |
| // markers: true, | |
| }, | |
| }); | |
| tl7.from('#div_block-261-7',{ | |
| y: 200, | |
| duration: 0.35, | |
| opacity: 0, | |
| ease: Power3.easeInOut, | |
| }); | |
| // section 8 | |
| const tl8 = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: '#section-8', | |
| start: '+=125px bottom', | |
| // markers: true, | |
| }, | |
| }); | |
| tl8.from('#div_block-294-7',{ | |
| y: 200, | |
| duration: 0.35, | |
| opacity: 0, | |
| ease: Power3.easeInOut, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment