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.

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

Adding swoop entrance and exit animations. #1772

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

emmanuelulloa
Copy link

I added a set of swooping entrance and exit animations.
They are inspired on the "smear" effect by Chuck Jones.
Review them in this codepen: https://codepen.io/emmanuelulloa/pen/PogVYPa

@emmanuelulloa
Copy link
Author

@daneden , @eltonmesquita o @warengonzaga any comment on the animations?

@warengonzaga
Copy link
Member

Hello @emmanuelulloa, I like the animation, but is there anything we can do to make it more fluid? The final decision would be from @eltonmesquita.

@daneden
Copy link
Collaborator

daneden commented May 8, 2024

@emmanuelulloa these are great! I’d suggest adding an opacity transition in the final ~50% of each keyframe animation. The translation is quite small and it's unlikely that transitioned elements would appear “off-screen” by the end of the animation (unlike some of the current exit/entrances, which translate elements by thousands of pixels to ensure they begin/end off screen).

As suggested by Dan Eden, I changed the opacity value change to last longer so is more visually perceived when the element enters and leave.
@emmanuelulloa
Copy link
Author

@daneden I added the opacity change and you are correct; they look way more natural. Please review at the same codepen: https://codepen.io/emmanuelulloa/pen/PogVYPa

@daneden
Copy link
Collaborator

daneden commented May 13, 2024

@emmanuelulloa nice, this does look better, although I'd suggest the opacity transition is a bit abrupt. It looks like the transition starts at the 65% keyframe right now; I’d play around with moving it to the 51% or 57% keyframe.

@emmanuelulloa
Copy link
Author

@daneden I move it to 57% (because at 51% it looked more like a regular fade). Please review and let me know what you think.

@emmanuelulloa
Copy link
Author

@daneden le me know what you think of the latest fix. Regards.

@warengonzaga
Copy link
Member

Hey @eltonmesquita can you take a look into this? Thanks!

@emmanuelulloa
Copy link
Author

@eltonmesquita any comments on regards to this one?

@emmanuelulloa
Copy link
Author

@daneden any chance you see into this before the end of 2024?

Copy link
Collaborator

@daneden daneden left a comment

Choose a reason for hiding this comment

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

This looks great, thanks for your adjustments! Approving to unblock. @eltonmesquita @warengonzaga you're both more familiar these days with the release process so I’ll leave it to you to approve/merge.

@warengonzaga
Copy link
Member

This looks great, thanks for your adjustments! Approving to unblock. @eltonmesquita @warengonzaga you're both more familiar these days with the release process so I’ll leave it to you to approve/merge.

Thanks! I'm not sure if I have merge capability but I will do my best to help approve the PRs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants