Gracy

📀 Gracy

• 사이트명: garcy studio
• 작업기간: 6일
• 사용언어: HTML5, CSS, JS
• 라이브러리: jquery, gsap, Swiper, Lottie, Lenis
• 유형: 반응형(모바일, 테블릿, 작은PC, PC)
  💻 https://king8875.github.io/gracy/

✅ Check Point

✔️ Lottie Animation
✔️ header Animation
✔️ 무한루프 Animation

---

1. Lottie Animation

gracy라는 사이트를 클론코딩하면서 처음사이트를 들어갔을 때, 이상한 애니메이션이 나왔는데 처음에는 그것을 일일이 만들어야하는 것인줄알고 막막했었지만 알고봤더니 Lottie Animation을 쓰면 되는것이었다....

🔎 Lottie란?
에어비앤비에서 개발한 라이브러리이다. After Effects(에프터 이펙트)으로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 웹, 앱(Android, iOS React-native)에 적용할 수 있는 백터기반의 애니메이션이다.

📌사용장점
✅ 백터기반인대 불구하고 용량이 작고 해상도 저하가 없다
✅ 사용자의 인터렉션에 따라 제어 가능(play,stop)

🚫사용단점
✅ After Effects(에프터 이펙트) 외에 쓸만한 작업툴x
✅ 제작 과정이 복잡하여 숙련도 필요

우선 lottie를 사용하는 방법은 다음과 같다.

1. head태그 안에다 cdn을 넣어준다.

<!-- lottie -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.14/lottie.min.js"></script>
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

2. html에 처음 사이트가 로드되었을때 실행될수있도록 설계해준다.

<div class="preloader-block">
        <span class="blind">인트로 로티 에니메이션</span>
        <lottie-player class="lottie" src="https://cdn.prod.website-files.com/668442316cf533d9ea640fb0/66d9c86fcc7af1460c271622_garcy-1.json" background="transparent"  speed="0.8"  autoplay></lottie-player>
    </div>

lottie-player의 src에는 json 파일이다. 이것은 애프터이펙트로 만든 애니메이션을 json형식으로 만든 파일이다.

3. 이 안에 speed => 속도, direction => 재생방향, loop => 무한재생, autoplay => 자동재생 등과 같은 속성을 넣어줄수있다.

4. 마지막으로 컨트롤해주기위한 코드를 js파일에다가 만들어주면 끝이다.

//preloader
var animation = $('.preloader-block .lottie')[0];
animation.addEventListener('complete',function(){ gsap.to('.preloader-block',{autoAlpha:0}); });

이 코드는 .lottie의 0번째 애니메이션을 변수에 저장해두고 addEventListener 의 'complete'을 써 이 애니메이션이 끝나면 사라지게 만들어주었다.

---

2. header Animation

스크롤을 밑으로내리면 header부분이 위로 올라가면서 없어지고 올리면 다시 생기는데 intro구간에서는 width가 100%이지만 그밑에서는 width가80%로 줄게 보여주는 애니메이션을 만들것이다.

우선 완성코드는

//header gsap
let lastScrollY = window.scrollY;
const header = document.querySelector('.header');

window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;

if (currentScrollY > lastScrollY) {
    gsap.to(header, { y: '-200%', duration: 1 });
    } else {
    gsap.to(header,{ y: '0%', duration: 1 });
}
lastScrollY = currentScrollY; 
});

1. 우선 lastScrollY라는 변수에 마지막 스크롤 길이를 넣는다.
2. 그리고 addEventListener의 'scroll'을 사용하여 현재 스크롤 길이의 변수인 currentScrollY를 만들어준다.
3. if문을 사용하여 currentScrollY가 lastScrollY보다 크면 위로 올리고 낮으면 원상복구되게 한다.
4. 그리고 lastScrollY = currentScrollY; 로 위치를 동기화시켜준다.

마지막으로 header의 크기를 줄이고 늘리는 코드는

headerWidthMotion =  gsap.to('.header-inner',{ width:'90%' });
ScrollTrigger.create({
    animation:headerWidthMotion,
    trigger: ".hero-section",
    start:"0% 0%", 
    end:"50% 0%", 
    scrub: 1,
    onEnter:function(){
        gsap.to('.header-inner',{
            backgroundColor:"#26282ccc"
        })
    },
    onLeaveBack:function(){
        gsap.to('.header-inner',{
            backgroundColor:"transparent"
        })
    },
});

create로 animation을 만들어주고 스크롤트리거로 조작해준다.

---

3. 무한루프 Animation

이 애니메이션은 많은 사이트들이 쓰는 애니메이션이며 배너처럼 무한으로 옆으로 움직이는 애니메이션이다.
처음에는 이 애니메이션이 쉬울줄알았지만 막상 구현해보려니 까다로운 부분이 많아 정리해야겠다고 생각했다.
이 애니메이션은 css로만 처리를했다.

우선 한바퀴돌아야할 ul을 두개 만들어서 한 ul이 끝났을때 뚝 끊기는 현상을 없애기위한 방법중 하나이다.

@keyframes marquee {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(-100%); 
    }
}

보통 이런 애니메이션을 marquee라고 불리운다.
이 키프레임을 사용해서

.brand-logo-wrapper .bl-inner .bl-single-list{
    display: flex;
    align-items: center;
    margin-top: 25px;
    animation: marquee 20s linear infinite;
}

다음과 같이 animation속성에 넣어주면서 infinite로 영원히 움직이게 만들어준다.
이렇게보면 쉬워보이지만 처음에는 원하는 애니메이션이 안만들어졌다😅😅😅

---