Adjusting Screen Size for Lottie Animation in React.js

Question

Adjusting Screen Size for Lottie Animation in React.js

I need assistance with resizing a lottie animation component on my website's landing page to set its display to none on mobile devices. How can I achieve this?

See the lottie component code below:

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";

export default function App() {
  const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
  preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
<div id="lottie">
  <Lottie
    options={defaultOptions}
    height={800}
    width={1000}
    style={{
      top: "30%",
      right: "10%",
      zIndex: -1,
      overflow: "hidden",
      position: "fixed",
    }}
  />
</div>
  );
}

This is the home component:

import Lottie from "../Components/Lottie";
import React from "react";

function Landing () => {
  let width = window.innerWidth;
  if (width > 600px) {
console.log(width);
  } else {
document.getElementById("lottie").style.display = "none";
   }
  <Lottie className="col-lg-8 col-sm-12 lottie d-none" />
}

export default Landing;

I attempted using external CSS as well:

@media screen and (max-width: 600px) {
  .lottie {
display: none !important;
  }
}

css reactjs bootstrap-4 react-hooks lottie

Answer 1

Answer №1

When working with React, you have the ability to conditionally render components without resorting to native DOM manipulation methods like document.getElementById.

One way to simplify retrieving window size is by creating a reusable function:
Create a file named windowDimensions.js

export function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

Then import this function into your App component:

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
import {getWindowDimensions} from './windowDimensions.js';

function App() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: data,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div id="lottie">
      {/* Conditionally rendering the Lottie component based on window width */}
      { getWindowDimensions().width > 600 &&
        <Lottie
          options={defaultOptions}
          height={800}
          width={1000}
          style={{
            top: "30%",
            right: "10%",
            zIndex: -1,
            overflow: "hidden",
            position: "fixed",
          }}
        />
      }
    </div>
  );
}

export default App;

This code will only display the Lottie component if the window width exceeds 600 pixels. You could also consider using CSS conditional rendering with `visibility: hidden` in your media query. Be mindful of how you reference IDs and classes in your CSS to ensure proper styling.

It's recommended to review the classes applied to your Lottie component for any potential issues. Refer to React documentation on conditional rendering for further guidance.

Answer 2

When working with React, you have the ability to conditionally render components without resorting to native DOM manipulation methods like document.getElementById.

One way to simplify retrieving window size is by creating a reusable function:
Create a file named windowDimensions.js

export function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

Then import this function into your App component:

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
import {getWindowDimensions} from './windowDimensions.js';

function App() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: data,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div id="lottie">
      {/* Conditionally rendering the Lottie component based on window width */}
      { getWindowDimensions().width > 600 &&
        <Lottie
          options={defaultOptions}
          height={800}
          width={1000}
          style={{
            top: "30%",
            right: "10%",
            zIndex: -1,
            overflow: "hidden",
            position: "fixed",
          }}
        />
      }
    </div>
  );
}

export default App;

This code will only display the Lottie component if the window width exceeds 600 pixels. You could also consider using CSS conditional rendering with `visibility: hidden` in your media query. Be mindful of how you reference IDs and classes in your CSS to ensure proper styling.

It's recommended to review the classes applied to your Lottie component for any potential issues. Refer to React documentation on conditional rendering for further guidance.

Answer 3

Answer №2

The CSS you are applying will not affect your Lottie animation element because in your code, .lottie is a class while your Lottie element is defined with an id. Therefore, you should use #lottie instead:

@media screen and (max-width: 600px) {
  #lottie {
    display: none !important;
  }
}

Answer 4

The CSS you are applying will not affect your Lottie animation element because in your code, .lottie is a class while your Lottie element is defined with an id. Therefore, you should use #lottie instead:

@media screen and (max-width: 600px) {
  #lottie {
    display: none !important;
  }
}

Answer 5

Answer №3

When working with <Lottie />, simply remove the d-none class and replace it with

 d-lg-block d-md-block d-sm-none d-none

to get the desired result.

Answer 6

When working with <Lottie />, simply remove the d-none class and replace it with

 d-lg-block d-md-block d-sm-none d-none

to get the desired result.

Adjusting Screen Size for Lottie Animation in React.js

Answer №1

Answer №2

Answer №3

Similar questions

HTML does not support the use of certain symbols

How can I dynamically populate my select field with JSON data using React.js?

Setting the dimensions of an HTML - CSS block

My website is being cut off

React-three - Showing a white square on Android mobiles in 3D model display

When I adjust the size of my browser, the elements on my HTML page shift around

What is the best way to create mock icons for all the React `@material-ui/icons` using Jest?

Creating diagonal background cutouts using CSS

Create a jQuery animation that mimics the Safari home page experience. Create a

Collapse or expand nested rows within a dynamic table using Bootstrap Collapse feature

The jQuery script version 3.5.1 encountered an error at line 4055 where DataTables was unable to access the property "aDataSort" due to it

What is the best way to apply a semi-transparent background to my navigation bar, while maintaining a blue background across my entire page?

The issue arises when FormData is sending a request with no content when attempting to transfer

Ensuring Data Population and Proper Display in React Testing Library - How to accurately verify that my provider is being filled with data and the child components are rendering correctly

Whenever I attempt to start my ReactJS project using the command line with `npm run it`, I keep encountering an error

Utilizing React with Ant Design to enable tag clicking and displaying in a text area

Display a preview of a React component

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?

Incorporate a fresh key-value pair into the Redux Toolkit's state

Trying to utilize RegEx for my project, but feeling stuck on how to solve my problem