웹플로우(Webflow)로 어디까지 개발이 가능할까?#1 - Fade 애니메이션

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있는데요.

연재 계획은 아래와 같습니다.

웹플로우(webflow)로 인터렉티브 웹사이트 만들기
- 토스랜딩페이지 클론하기(현재 포스팅)
- 웹디자인 awwwards 수상작 클론하기
웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

지난 글에서는 웹플로우(webflow)의 기본세팅과 헤더를 만들면서 HTML, CSS를 설정해보았습니다.

이번 포스팅에서는 Fade 애니메이션을 다뤄보겠습니다.

랜더링 시 Fade 애니메이션

기본 스타일링 + 레이아웃

이제 첫번째 섹션을 만들어보겠습니다. 우선 모든 요소들을 스타일과 레이아웃을 시경쓰지말고, 나열해서 넣어주겠습니다.

background 이미지로 우리가 이전 글에서 준비해뒀던 이미지를 넣어주었습니다.

(이 포스팅에서는 Fade 애니메이션을 주로 다루기 때문에 구체적인 속성은 언급하지 않고, 레이아웃과 기본 스타일링을 잡았습니다. 웹플로우(Webflow) 스타일 적용과 관련하여 궁금한 점이 있다면 댓글로 남겨주세요)

첫 랜더링 시 서서히 등장하는 Fade 애니메이션 실습하기

먼저 애니메이션 효과(인터렉션)을 만들기 전에 개념을 잠깐 살펴보고 넘어갑시다.

애니메이션 전에는 항상 트리거가 선행되어야 합니다.

애니메이션 효과가 시작하기 전에 애니메이션 효과를 시작하게 만들어줄 트리거(계기)가 필요합니다.

우리가 웹 사이트를 사용할 때, 자연스럽게 애니메이션을 접할 수 있는데요.

클릭하면(트리거), 어떤 요소가 움직인다던지, 마우스를 올려놓았을 때(트리거) 색상이 변한다던지 하는 것들이 트리거와 애니메이션의 관계입니다.

웹플로우(Webflow)에는 2가지 종류의 트리거가 있습니다.

간단히 설명해서 요소 트리거는 특정 요소에 마우스를 올려놓거나(hover), 클릭하거나, 요소가 현재 화면에 보이도록 스크롤되었을 때 선택한 요소에 애니메이션 효과를 줄 수 있는 애니메이션입니다.

페이지 트리거는 페이지의 상태가 변할 때 발생하는 애니메이션입니다. 페이지가 로딩될 때 혹은 페이지가 모두 스크롤 되었을 때, 선택한 요소의 동작을 조절할 수 있습니다.

Fade 애니메이션을 요소 트리거를 활용해서 구현해볼 것 입니다.

첫 랜더링 시 서서히 등장하는 Fade 애니메이션 구현

오른쪽 보조 툴바에 interaction 탭에 들어가서 element tirgger를 추가해줍니다.
저희가 원하는 요소가 화면에 나왔을 때(처음 랜더링 되었을 때) 투명도(opacity)를 조절할 수 있도록 Scroll into view 이벤트를 걸어줍시다.
Scroll into view 이벤트에서는 스크롤을 통해 요소가 화면에 등장했거나(when scrolled into view) 혹은 화면에서 사라졌을 때(When scrolled out of view) opacity 투명도를 변경할 수 있습니다. 스크롤해서 화면에 나왔을 때, 투명도를 변경하는 것이 목적이기 때문에 When scrolled into view에서 Action을 선택해줍니다.

다양한 액션들을 고를 수 있습니다. Opacity 투명도를 서서히 밝게 만드는 것이 목적이기때문에 Fade 이벤트를 걸어줍니다.
Fade in으로 설정하고, offset을 0으로 설정합니다. 이는 scroll이 얼마나 진행된 후 fade 애니메이션을 보여주냐를 결정합니다. 첫 랜더링 때 바로 등장시키고 싶기 때문에 0으로 설정합니다. 얼마나 시간이 흐른 후 나타나게 할 것이냐는 Delay를 통해서 설정할 수 있습니다. 750ms 로 설정해줍니다.

아래와 같은 결과를 얻을 수 있습니다.

정리하기

이번 포스팅에서는

에 대해서 알아봤습니다.

이렇게 웹플로우(webflow)를 이용한다면, 코딩없이도 애니메이션도 구현할 수 있습니다.

다음 게시글에서는 아래의 스크롤 인터렉션에 대해서 알아보겠습니다.