You can achieve your desired functionality in ChakraUi using Tabs and animation from framer-motion. Here is the minimal example:

import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Text, Flex } from "@chakra-ui/react";
    import { motion } from "framer-motion";
    import { useState, useRef } from "react";
    
    const MotionBox = motion(Box);
    
    const TabComponent = () => {
      
      const categories = [
        {
          name: "Category 1",
          subcategories: ["OIL", "MEAT", "JAPANESE TASTE"],
          content: ["Content for oil", "Content for meat", "Content for Japanese taste"]
        },
        {
          name: "Category 2",
          subcategories: ["Subcategory 2.1", "Subcategory 2.2", "Subcategory 2.3"],
          content: ["Content for 2.1", "Content for 2.2", "Content for 2.3"]
        }
      ];
    
      const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0);
      const [selectedSubcategoryIndex, setSelectedSubcategoryIndex] = useState(0);
      const contentRef = useRef(null);
    
      const onCategoryChange = (index) => {
        setSelectedCategoryIndex(index);
        setSelectedSubcategoryIndex(0);  // Reset subcategory when changing categories
      };
    
      const onSubcategoryChange = (index) => {
        setSelectedSubcategoryIndex(index);
        if (contentRef.current) {
          contentRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      };
    
      return (
        <Tabs index={selectedCategoryIndex} onChange={onCategoryChange} variant="soft-rounded" colorScheme="teal">
          {/* Main Categories */}
          <TabList>
            {categories.map((category, index) => (
              <Tab key={index}>{category.name}</Tab>
            ))}
          </TabList>
    
          <TabPanels>
            {categories.map((category, index) => (
              <TabPanel key={index}>
                <Flex direction="column">
                  {/* Subcategories */}
                  <TabList>
                    {category.subcategories.map((sub, idx) => (
                      <Tab key={idx} onClick={() => onSubcategoryChange(idx)}>
                        {sub}
                      </Tab>
                    ))}
                  </TabList>
    
                  {/* Subcategory Content */}
                  <TabPanels>
                    {category.subcategories.map((sub, idx) => (
                      <TabPanel key={idx}>
                        <MotionBox
                          ref={contentRef}
                          initial={{ opacity: 0, x: 100 }}
                          animate={{ opacity: 1, x: 0 }}
                          exit={{ opacity: 0, x: -100 }}
                          transition={{ duration: 0.5 }}
                        >
                          <Text>{category.content[idx]}</Text>
                        </MotionBox>
                      </TabPanel>
                    ))}
                  </TabPanels>
                </Flex>
              </TabPanel>
            ))}
          </TabPanels>
        </Tabs>
      );
    };
    
    export default TabComponent;

And about scroll can you provide more clarity for what you want scroll to.