mozi47 Posts - Answer Overflow

mozi47

Posts Comments

KPCKevin Powell - Community

•Created by mozi47 on 2/22/2024 in #front-end

CSS Scroll Animation

8 replies

KPCKevin Powell - Community

•Created by mozi47 on 8/6/2023 in #front-end

Height Issue

I am working on web app, and the dashboard should only cover the full viewport of 100vh and 100vw. Preventing the horizontal and vertical scroll. HTML structure:

<div className="flex w-full max-h-screen overflow-hidden">
  <Sidebar />
  <div className="w-full bg-bg">
    <Navbar />
    <div className="flex justify-between w-full gap-4 mt-8 mb-6">
        <LeftContent />
        <LabelContent />
    </div>
  </div>
</div>

LeftContent Structure:

<div className="w-full h-full">
  <SwitchButton />
  <ReadingAnimation reading={reading} />}
  
  <div className="h-full mt-[1.375rem] overflow-auto  bg-card" >
      <pre>{Content Here}</pre>
  </div>

  <button>NEXT</button>
</div>

In the leftContent component, the div with pre tag, I add "full-height", and div exceeds 100vh height. I don't want this. I want the div should cover only the available. I tried flex-grow but that didn't work either. How to solve this?

34 replies

KPCKevin Powell - Community

•Created by mozi47 on 5/25/2023 in #front-end

Grid Horizontal Scroll issue

4 replies

KPCKevin Powell - Community

•Created by mozi47 on 5/22/2023 in #front-end

Flex grow issue

I am trying to grow the div when clicked. Its working fine but when add the content then its not working. https://codesandbox.io/s/clever-christian-7unckn?file=/src/App.js

8 replies

KPCKevin Powell - Community

•Created by mozi47 on 5/19/2023 in #front-end

Animation Help

I want to replicate the same animation in this website: https://pipe.com/ If you scroll, there is animaiton of progress bar. The animation stop when the section is not in viewport and resume when in viewport. I did the same. But this animation is glitchy. Also its not working properly, when not in viewport and then scroll to again in viewport. https://stackblitz.com/edit/nextjs-xhkt9f?file=pages/index.js need help and suggestion. I used setInterval but it was not working properly so I feel requestanimationframe was better choice. Open for suggestion.

1 replies

KPCKevin Powell - Community

•Created by mozi47 on 5/16/2023 in #front-end

CSS help and suggestion

14 replies

KPCKevin Powell - Community

•Created by mozi47 on 5/3/2023 in #front-end

Need help in designing the table

31 replies

KPCKevin Powell - Community

•Created by mozi47 on 3/3/2023 in #front-end

Parent props render when theme changes

Hi, I want to change the props based on the toggle theme of website. But I dont know why my parents props not updating when the theme changes. Code here https://codesandbox.io/s/sharp-lamarr-hzpcdr?file=/src/App.tsx Looking for explaination.

1 replies

KPCKevin Powell - Community

•Created by mozi47 on 2/18/2023 in #front-end

3d flip text Animation

I want to create text flip animation like in this website: https://scale.com/ I want this should be https://codepen.io/mozi47/pen/MWqapOY So far I achieved somehow this animation. https://codepen.io/mozi47/pen/MWqapOY but I want autoplay, I tried setInterval but that doesnt work, need help

6 replies

KPCKevin Powell - Community

•Created by mozi47 on 2/3/2023 in #front-end

Transition not working Tailwindcss

//Hamburger Button <div className='md:hidden text-3xl items-center' onClick={()=>{setMenu(true);}}> <RxHamburgerMenu/> </div> //Menue <div className={${menu ? "top-0":"hidden"} -top-[490px] transition-all duration-300 absolute w-full py-4 px-8 bg-secondary}> //close button <AiOutlineClose className='float-right text-right text-lg' onClick={()=>setMenu(false)} /> //navlinks <div className='mt-6'> <ul className='text-center space-y-4 relative'> <li> <a onClick={()=>setMenu(false)} href="#home">Home</a> </li> <li> <a onClick={()=>setMenu(false)} href="#program">Program</a> </li> <li> </ul> </div> </div>

3 replies

KPCKevin Powell - Community

•Created by mozi47 on 11/27/2022 in #front-end

React table shuffle Animation

How I can do this animation.
I have 2 tables, when navigate to route this animation should perform, But I am confuse, how I can do this. https://codesandbox.io/s/jovial-curie-jmtmdo?file=/src/App.js:2916-2921

3 replies

KPCKevin Powell - Community

•Created by mozi47 on 11/25/2022 in #front-end

Transition in react, when navigate to different route.

Hi, I want this transition in react. when click on button the the extra button toggle but with nice transition. https://codepen.io/mozi47/pen/JjZvdyX But in react, when the route changes the transition not working. How I can solve this? when routing from home to page1 the transtion not working. viceversa. https://codesandbox.io/s/amazing-ptolemy-k9kkrc?file=/src/App.js

3 replies

KPCKevin Powell - Community

•Created by mozi47 on 11/21/2022 in #front-end

transition from one button to another

I want this effect but I am confuse how to achieve this? Do I need a separate div and then align the position? Here is the codepen link https://codepen.io/mozi47/pen/MWXQgbw

2 replies

Gaming

Programming