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

Add several animations

Im trying to add several animations to an element by using JS because it's a dynamic element, the problem is the element.style.animation apparently only allows one declaration I cant add by using string concatenation like this :
js element.style.animation += "my_other_animation 1s ease-out"
js element.style.animation += "my_other_animation 1s ease-out"
I also can't declare them both (comma separated) because one is added when dragging and the other when the element is created. Since the declaration above takes precedence the other one is overwritten so how to add several animations ? I thought maybe adding custom props for each animation and adding class with both animations declared using the custom props? but Is there a way in JS ?? thx fiddle here : https://jsfiddle.net/dhea7rqk/1/...

Issue with Infinite Scroll Not Working on Safari/Apple Devices

Hi, I'm experiencing an issue with my infinite scroll it works perfectly on all browsers except Safari or Apple devices.On these devices, when reaching the end of the infinite scroll, a reload occurs, which does not happen on other browsers. I'm not sure what exactly is causing the problem, and I haven't been able to find a fix. Do you have any suggestions on how to resolve this issue? Any help would be greatly appreciated!...

sass file structure using @use and @forward

hi iam trying to wrap my head around sass file structure and i got lost in@use and @forwardimplementation for example my file structure is like this ; `` util ┣ _variable.scss ┣ _reset.scss ┣ _utilities.scss...

Overlapping containers Dilemma..

👋 Hi everyone, I have encountered a bit of a dilemma when creating a section containing overlapping container blocks… In my project I have created the overlap using “translateY: 15vw;” however I encounter extra spacing at the bottom of the section.....
No description

How to do this kind of scroll of cards

https://deadline.ma/ Here's the website, specifically in this area in mobile, see that scroll that has the top part as position sticky I guess...
No description

Infinite Scroll – How to Remove the Noticeable Cut at the Loop End

https://codepen.io/Redcaus12345/pen/EaYqEdE How can I make the end of the loop smoother? There's a noticeable cut or restart that doesn't look seamless. Any tips or suggestions ?

MDL (Material Design Lite) bug with scroll momentum

How could I troubleshoot this bug that breaks scrolling momentum in Safari Desktop 18.1? By that I mean that the page should keep scrolling and decelerating when I flick up or down with two fingers on the trackpad, and originally it worked fine, but since sometime in the last year or so it stopped doing that. It has something to do with background-attachment: fixed and the CSS class mdl-js-layout on the parent. I have narrowed it down to this codepen. https://codepen.io/peendoc/pen/xbKvRBr...

Which one is correct?

Hello, Where should I append a created element? https://codepen.io/lanszelot/pen/XJrvRjJ 15th or 17th line is the correct? Both of them do the same result, but I do not know which one is correct and why....

https://codepen.io/Redcaus12345/pen/wBwVBbm

Hey, I built a slideshow and wanted to ask if it's responsive enough or if anyone has suggestions for improvement. Is there a better way to do it? I know the images aren’t loading. 😊...

js question

https://codepen.io/etrbbr/pen/LEPoMQZ Hey guys. When I add a new <li> element, an <hr> line should appear after each one. But the problem is that when I add it via JS, it works incorrectly. How it should look – in CodePen before adding new elements....
No description

responsive-problem with the scaling of 2 images with position absolute on

hi there , if i resize the window the other on is bigger than the other one and they are not in same position as before . if anyone had an idea what i can do ? https://codepen.io/Styxio-frik/pen/qEWzwGZ...
No description

Failing to animate(using transition) something from display none to block on hover

So this is some very simple code I have to replicate the problem I am having in my main project: ``` import "./Test.scss" const Test = () => {...

Why is the Checkbox component "jumping" when hovered on/off?

I've created the Checkbox component in React, but when I hover over it, the component appears to "jump". Why does it happen if the height of the component doesn't change? https://stackblitz.com/edit/vitejs-vite-fkhdvvb4?file=src%2Fcheckbox%2FCheckbox.tsx...

https://codepen.io/Redcaus12345/pen/wBwLqxm

Hi, I'm working on a slideshow using JavaScript that should also work on iPads and Phones, but I'm having trouble with the mobile display. Do you know how I can code it to function properly on these devices? Any tips would be appreciated!

Center a div

This is my solution for challenge number 1. My question is that when I set the style
margin: 0 auto;
margin: 0 auto;
the parent div is automatically centered horizontally . If I do the following it centered horizontally too:...
No description

CSS grid that's constrained vertically

Finding it pretty difficult to recreate this pattern tbh Each image needs a fixed aspect ratio (easy enough), but as the grid grows the content should be constrained by the grid height and overflow/grow horizontally if it needs to. Problem I've currently got is how the horizontal space is distributed between columns rn (2nd image)...
No description

js question

i am making to do app, and i cant figure out how to check if "goal" is confirmed. https://codepen.io/etrbbr/pen/LEPoMQZ i have one idea but i am not sure that is correct....
Next