Easier way to move an element(animation-like)

I want to target a dom element and move it horizontally, or vertically, using JS and basic commands(no additional frameworks/libraries)
So far i found two approaches. One is to set element positioning to relative and manipulate top/left/bottom/right values. The other is to manipulate via transform(). For example element.style.transform='translate(100px)'.
Im slightly worried this is using inline styling.
Any suggestion/recommendations which approach to use, or maybe there is a different one? Maybe applying classes? Althought im already using classes for another perpose and it will be messy to include another batch of classes to work with.

1 Like

Yes, it is, but why are you worried about it? If you really don’t want to do that, then there is the Web Animations API, which gives you access to the exact same underlying things as CSS animations (and same hooks: transitions, keyframes), so it’s the same thing but totally in JS. But otherwise you need to modify CSS, so, like you’re doing, it’s fine.

2 Likes

I would suggest using classes. I don’t think it would be messy to include a few utility classes such as “move-left”, “move-right”, etc. Plus, they are reusable.

problem is i already use similar utility classes, to handle other things. There are parts in my code where i clear the whole class list(of the elements in question), before adding new classes. It will certainly interfere with any additional ‘utility’ classes as the code so far was written with the assumption there are only the current ones and it could lead to unexpected behavior.

No matter im not a fan of manipulating the styling inline with JS to reach my goal, i will use this approach as it would be good opportunity to see how it works, as i scarsly used it before and maybe ill prove myself wrong and find it more appropriate.

1 Like

@Sylvant That makes sense. Good luck!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.