1

I am currently working on Rob Dey's Upskill Crash Course on web development. Everything is going well but I had a question about the animation of my logo. Here is my code:

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a  { // Used for the 'Brand' button AKA devmatch on navbar and About button
  color: white;
  filter: blur(0.43px);
  transition: 1s;
  &:hover {
    color: white;
    opacity: 0.75;
    transform: scale(1.1);
  }
}

This code creates this sort of animation for my logo: https://imgur.com/a/LVvCbOe

It is all working well the only thing I'm wondering is if it's possible to stop the "snapping back into place" that seems to happen at the end of the transition. I fear the only way to stop it is to create my own animation and import it rather than using the transition modifier.

Thanks

Edit: I actually found somewhat of an answer below.

2
  • 1
    You'll probably have better luck starting off with the elements starting at a scale beneath 1 and going up to 1 on hover May 17 at 18:01
  • 1
    I find transform transitions can run smoother by adding the start state (transform: scale (1.0); opacity: 1;) to the non-hover css properties. This way new properties don't have be loaded when the transition starts or removed when it stops. Just a guess though.
    – Scott
    May 17 at 20:11

2 Answers 2

1

An animation is browser-specific. That snap could not happen on another browser.

But for your specific case, the animation is too long. One second is a "dramatic" animation, but on a button should be visual feedback. Probably .3s or .5s is a better choice and will reduce the "snapping" look.

You could also try some ease-out so the animation is smoother at the end.

You can also test some new scaling dimensions. Try 1.15.

And you also can do the opposite. Let your logo be at a scale of 1 at the end, and start with a value of .9. Experiment a bit.

0

I myself have seemed to have found an answer to my own question! Thank you to the people who responded with answers, especially Rafael who invited me to experiment. The thing I found that worked the best was instead of using transform: scale(); to make my logo pop more, It was a lot smoother when adjusting the font size using pixels. Code below:

    .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a  { // Used for the 'Brand' button AKA devmatch on navbar and About button
  color: white;
  filter: blur(0.3px);
  transform: scale(0.9);
  transition: 0.3s;
  &:hover {
    color: white;
    opacity: 0.75;
    font-size: 20px;
  }
}

And finally the new transition: https://imgur.com/a/45L5TRn

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.