Add cloud floating and submit button animation #12
Conversation
What's changed: - Added CSS cloud floating animations as described by Tina's design doc - Submit button enlarges on hover - NOTE: I didn't add the other mailing list animations since those probably will need javascript
|
Deploy preview for sbhacksvii ready! Built with commit 86ba164 |
There was a problem hiding this comment.
Animation timing needs a bit of tweaking, we should not be using a linear timing function since that looks unnatural (nothing in nature moves without acceleration/deceleration). The seal animation needs to move much faster as well.
In addition, the transition on the seal is creating an undesirable "slide-in" animation on page load.
| .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%); | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
What's changed:
@tshiUCSB feel free to edit the speed on the cloud animations