Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add cloud floating and submit button animation #12

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add cloud floating and submit button animation #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion src/_css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,43 @@
src: url("/fonts/Nexa Bold.otf") format("opentype");
}

.float-logo-map-cloud {
animation: harmonic 8s infinite;
animation-timing-function: linear;
}
.float-cloud-back {
animation: harmonic 3s infinite;
animation-timing-function: linear;
}

.float-cloud-front {
animation: harmonic 6s infinite;
animation-timing-function: linear;
}

.w-wax_seal_submit_animation {
transition: transform 0.5s;
}

.w-wax_seal_submit_animation:hover {
transform: translateX(-50%) scale(1.2);
}

@keyframes harmonic {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-1%);
}
75% {
transform: translateX(1%);
}
}
Comment on lines +6 to +39
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, we should not be writing custom CSS here. All new CSS should be registered with Tailwind, which auto-generates a lot of helpful utilities/modifiers and helps us keep a consistent design framework.

The documentation for doing that can be found here: https://tailwindcss.com/docs/animation#customizing, or I can convert the CSS over once the animation is tweaked.

Copy link
Contributor Author

@jayleenli jayleenli Oct 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My say is just merge it for now, since it works fine I just want our site to look slightly more lively cuz we are going to announce it tomorrow. It kinda looks dead - Feel free to change it to something better when you make application site. I showed to some of my friends and they really liked how there is animation on it

After seeing the difference between linear movement and sine wave movement, the linear one looks a lot better IMO. Tina is the judge on that though. I made a codepen comparing the difference- you can easily swap the keyframe animation for the sine wave one.

https://codepen.io/jayleenli/pen/ExyWNeq


@tailwind base;

@tailwind components;

@tailwind utilities;
@tailwind utilities;
16 changes: 8 additions & 8 deletions src/_includes/event_info.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<section class="relative inline-block text-3xl md:text-4xl lg:text-5xl md:mr-10 lg:mr-64 pointer-events-none">
<img src="/images/logo_map_cloud.png" alt class="invisible w-logo_map_cloud">
<img src="/images/logo_map_cloud_shade.png" alt class="absolute top-0 w-logo_map_cloud blend-multiply z-30">
<img src="/images/logo_map_cloud.png" alt class="absolute top-0 w-logo_map_cloud z-40">
<img src="/images/logo_map_cloud.png" alt class="invisible w-logo_map_cloud float-logo-map-cloud">
<img src="/images/logo_map_cloud_shade.png" alt class="absolute top-0 w-logo_map_cloud blend-multiply z-30 float-logo-map-cloud">
<img src="/images/logo_map_cloud.png" alt class="absolute top-0 w-logo_map_cloud z-40 float-logo-map-cloud">
<img src="/images/island.png" alt class="absolute top-9/12 left-1/6 w-island">
<img src="/images/cloud_back_shade.png" alt class="absolute bottom-1/6 left-7/12 z-20 blend-multiply w-cloud_back">
<img src="/images/cloud_back.png" alt class="absolute bottom-1/6 left-7/12 z-30 w-cloud_back">
<img src="/images/cloud_front_shade.png" alt class="absolute bottom-7/12 left-1/3 z-20 blend-multiply w-cloud_front">
<img src="/images/cloud_front.png" alt class="absolute bottom-7/12 left-1/3 z-30 w-cloud_front">
<div class="absolute top-1/2 w-full text-center text-brown-900 z-40 text-sm md:text-base lg:text-xl pointer-events-auto md:tracking-wide">{{ event_info.date_location }}</div>
<img src="/images/cloud_back_shade.png" alt class="absolute bottom-1/6 left-7/12 z-20 blend-multiply w-cloud_back float-cloud-back">
<img src="/images/cloud_back.png" alt class="absolute bottom-1/6 left-7/12 z-30 w-cloud_back float-cloud-back">
<img src="/images/cloud_front_shade.png" alt class="absolute bottom-7/12 left-1/3 z-20 blend-multiply w-cloud_front float-cloud-front">
<img src="/images/cloud_front.png" alt class="absolute bottom-7/12 left-1/3 z-30 w-cloud_front float-cloud-front">
<div class="absolute top-1/2 w-full text-center text-brown-900 z-40 text-sm md:text-base lg:text-xl pointer-events-auto md:tracking-wide float-logo-map-cloud">{{ event_info.date_location }}</div>
</section>
2 changes: 1 addition & 1 deletion src/_includes/mailing_list.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
Join our mailing list for updates!
</div>
</div>
<button type="submit" class="absolute cursor-pointer top-1/2 left-1/2 w-wax_seal_submit z-40 transform -translate-x-1/2">
<button type="submit" class="absolute cursor-pointer top-1/2 left-1/2 w-wax_seal_submit z-40 transform -translate-x-1/2 w-wax_seal_submit_animation">
<img src="/images/wax_seal_submit.png" alt="Submit" class="w-wax_seal_submit">
</button>

Expand Down