Image animation on resize window

Question

Image animation on resize window

689 views Asked by LVD At 22 June 2020 at 19:56

I was wondering if it is possible to animate a logo between different sizes like this on window resize

so when the window is resized to a smaller window, the logo animates to a smaller variant and vice versa.

i am not really interested in the animation, but more on how to combine the window resize with the animation.

I know that there is a javascript onresize Event and that its possible to animate a logo using javascript.

I dont know wether its best to animate in JS or CSS.

i'm trying to do it with just html, css and javascript.

Original Q&A

There are 2 answers

**Shean** · Answer 1 · 2020-06-22T20:05:32+00:00

What you are trying to achieve is a little unclear in your post. To identify the varying window resizes you can choose the following css code based of the resolution of varying devices.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

According to your post, you wanted to animate a logo. To this accordingly, put the animation of the logo inside one of the css resolution restrictions.

The following code was taken from: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

If you want more information on window resizing click on the link above.

Hopefully this helps.

**Bruno Monteiro** · Answer 2 · 2020-06-22T21:47:01+00:00

I was wondering if it is possible to animate a logo between different sizes like this on window resize

Yes, you can do that, and there are a couple of options.

I don't know wether its best to animate in JS or CSS

I would say that it depends on your animation. CSS animation is usually "lighter" than Javascript, but may not work for complex animations. In the other hand, you have Javascript options like Lottie, Motion (and others) that will allow you to have more complex animations and are usually more compatible across browser and devices. They will require extra libraries in your code though.

how to combine the window resize with the animation

You can either use CSS with media queries (as explained in Shean's answer), or Javascript resize events (as you said). I would recommend using CSS media queries if your animation is in CSS, and Javascript resize events if your animation is in Javascript. You could mix those, but I don't think it is a good idea.

Here are 2 basic examples (one for a CSS animation and another one for a JS animation):

CSS animation

You could have this HTML structure:

<body>
  <div class="my-logo">
    My logo here
  </div>
</body>

And this CSS code:

/* This will show in small screens */
.my-logo {
  // Your CSS animation code here
}

/* This will show in bigger screens */
@media only screen and (min-width: 768px) {
    .my-logo {
      // Your CSS animation code here
    }
}

Javascript animation

You could have this HTML structure:

<body>
  <div id="smallLogo">
    My small logo animation here
  </div>
  <div id="bigLogo">
    My big logo animation here
  </div>
</body>

And this Javascript:

function handleLogoDisplay() {
  if (window.innerWidth < 768) {
    document.getElementById("smallLogo").style.display = "block"
    document.getElementById("bigLogo").style.display = "none"
  } else {
    document.getElementById("smallLogo").style.display = "none"
    document.getElementById("bigLogo").style.display = "block"
  }
}

window.addEventListener('resize', handleLogoDisplay);

TechQA.

Image animation on resize window

There are 2 answers

CSS animation

Javascript animation

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in ANIMATION

Related Questions in ONRESIZE

Popular Questions

Popular Tags

Trending Questions