Transition doesn't work in React (CRA) app

I need the bottom of the text to be grayed out, and long text to be cut off at a specific height. There’s a button that, when clicked, should expand this section. Everything works fine except for the animation that I would like to add. What am I doing wrong?

My code is below:


import { useState } from "react";
import "./Animal.scss";

export const Animal = ({ className }) => {
  const [showFullArticle, setShowFullArticle] = useState(false);

  return (
    <div className={`${className ? className : ""}`}>
        onClick={() => {
        READ MORE
      <div className="animal-container">
        <div className={`article ${!showFullArticle ? "faded-out" : ""}`}>
          <div className="title">Lorem Ipsum</div>
          <div className="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
              tortor dolor, hendrerit non nunc eget, iaculis accumsan magna.
              a lot more text here...


  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;

    padding: 20px 20px 20px 0;
    position: relative;

    max-height: 2000px;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;

      overflow: hidden;
      max-height: 200px;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 400px; /* Adjust the height of the fade-out effect */
        background-image: linear-gradient(to top, white, transparent);

      font-size: 30px;
      font-weight: bold;

      padding-top: 20px;

      font-size: 20px;
      pre {
        white-space: break-spaces;
        margin: initial;

You can see example here:

Thank you for any help.

>Solution :

Move overflow: hidden to the .article class.

Leave a Reply