Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

Jittering infinite horizontal scroll animation tailwindcss

Hi, I am currently working on implementing a infinite scrolling horizontal component in one of my projects. My current implementation almost works but when the scroll loops back around to the beginning it jitters and stutters instead of looping back smoothly. Can someone help me figure out how to get rid of this jitter and make the animation smooth? Here is a tailwind playground environment with the reproduced issue in a simplified setting: https://play.tailwindcss.com/QEIuz1dYBX...

component scoped private props

I’ve seen KPow do this in several videos with the locally scoped custom prop whose value is set to a global prop but then in the modifier class, changes the global prop. Haven’t really grasped why he changes the global one (sans underscore) instead of the local one (with underscore). Or vice versa just abstain from making a local and just use the global. I’m sure there’s a good reason but why ? Wouldn’t you want to change the locally scoped :nth-of-type(2){ —_border: hotpink ; }
That has the indicator (the underscore) that it’s a private prop if you’re going to declare it anyway? Is it just to ensure a fallback? People coming upon the modifier class (.bubble-1) will see —border and go looking in the root for it?...
No description

Progress bars value/width does not change with javascript (bootstrap)

i was trying to change the value or width (i dont know what to call it) of the bootstrap progress bar using onclick event but when i tried to change that nothing has happened so i tried to console log to see whats happening and i saw the width variable of the progress bar keeps returning as NaN. https://codepen.io/SirYido/pen/ExzWwPN

Max-width child should be aligned at the center

we have a parent div of width 100% ,its child has a max-width containing the title of 350px aligning at the center.After writing the desired css there is some unwanted spaace left in the container how can we avoid this?
No description

3 Cards 1 row where the center card is 1.5 times the size of the 1st and 3rd card.

Like the image, I want 3 divs stacked horizontally. 1st and 3rd div should be the same size but the 2nd (center) div should be a little bigger than the 1st and 3rd div. I tried using scale(1.5) on the 2nd div but then it over laps with the 1st and 3rd div. I thought about manually setting height on all three cards and giving the middle one a greater value that the corner cards but AFAIK it's not recommended to set height on things. I am using tailwind with react, if it matters....
No description

SVG Morphing

Hello, I am currently playing around with SVG animations and was looking to morph one path to another. I wondered if you guys had any recommendations on the most straight-forward tools/plugins to make this happen. Currently working on a project that needs several different paths to morph among themselves seamlessly.

Hello i need help

I realy dont understand how they are making like this without disrupting the flow
No description

Make element sticky relative to parent?

Hi there, I have a <code> element displaying some content with a floating label to copy the text next to it. Sometimes, the content inside gets too long and have set a width limit and allow for horizontal scrolling. The problem is when this happens the floating label does not stick to the right corner of the element in in the way that I hoped. It should be fairly obvious what I mean with an example: https://codepen.io/D10f/pen/RwmpRjN...

simple discord.js bot question

hey, I have a bot for my NFL server and I wrote this script to ping a user who hates the player Trevor Lawrence anytime tlaw is mentioned. It will read a message for tlaw and ping the user, but for whatever reason capitalized t in Tlaw does not work -- I thought using the | | operator would work but it isn't, thoughts?
No description

Slider animation except at first page load

I have this basic slider and it works pretty good but I want to prevent the animation of the first slide when the page loads for the first time. https://codepen.io/Andreica289/pen/ExzZzME...

cookies data on website

How developers can focus on cookies with websites ? #front-end

Really cool text effect

Hey yall, I kind of wanted to recreate the effect that this website has on their Header text for their home page https://www.homagames.com/homa-lab Does anyone have any idea how to replicate it? the closest ive come, is just doing a typewriter effect, but with a randomized letter being shown before the intended letter....

Tracking cursor position over window rather than individual elements

I've been playing with an effect where a partially masked element positioned over the mouse adds filters in a glowy blob over a background grid of dots. See the codepen at https://codepen.io/Beanie127/full/RwmKvmz. The problem I'm having is that when the cursor is over any element other than the div in the background, the circle positions relative to the cursor's offset over the element that the mouse is over, rather than relative to the whole viewport. I've tried creating a new contentless element that sits at the top of the z-index and tracking the cursor's position on that element, but then the cursor can't interact with any elements underneath, so it's degrading UX....

choppy animations in Firefox with mask

Hi guys, I have run into a performance issue with my personal website. I have this background animation that runs infinitely. On top of it there is a mask, making the edges fade out. This all works perfectly in chromium based browsers, but on firefox it lags a lot when using the mask. Disabling or removing the mask stops the lag and makes the animaton run smoothly....

Chrome vs. Firefox 😳

For this site: https://amarlong.github.io/Deichman/frontpage.html I have the picture set at 70dvh, and it works fine in Firefox (img 1), but not in Chrome (img 2). This in unchartered territory for me, so not sure how to attack this issue....
No description

Help me position the object.

I need to place the object next to the <aside> but I can't get it to work. I'm working with the Django framework. The screenshot shows how I want it to be positioned. The second screenshot shows what I'm trying to achieve. I will show the next HTML message. main.css css is not a complete code...
No description

Trying to inject styles in shadow-dom but element.shadowRoot is always null

SOLVED: Shadow Dom created by the browser cannot be altered. I am trying to style the timeline of an audio player and need to inject a stylesheet into the shadow-dom to do this (::-webkit are not enough). edit: Now this codepen https://codepen.io/fluffybacon-steam/pen/dyENayJ...

Dark Mode with Vue

Hello guys, is it good idea that i use class binding in dark mode feature with vuejs? Any Suggestions, Recommendations, Opinions?...

Why aren't these grid elements moving next to each other?

I'm using the following scheme in a 3-column grid layout: ```css img:nth-of-type(2n-1) { grid-column: 3; }...
No description

how do i select the content

newBook.children[0] contains ```<div class="bookTitle"> <h3>Title:</h3> <span>Think and grow rich</span> </div>...