minskleo / trueanimation

Low weight lib, that helps with step-by-step animation

See full CV on my personal website: minskleo.dev

Contacts:
linkedin
[email protected]

I'm a JavaScript/TypeScript developer with 5+ years of commercial experience in Frontend. Mostly I worked with:

• React
• React Native
• Node JS scripting
• Node JS Backend

In my work I always try to create as much efficient and architecturally correct solutions as possible. I have a good understanding of OOP principles, main architectural design patterns and their implementation and correct use in web applications. Always thinking about performance and ease of maintenance.

Also I'm good at:

• Optimizing React applications
• Making flexible and reusable components
• Separating logics in React applications
• Making responsive UI in mobile applications (React Native)
• Creating powerful and easily maintainable software solutions

Other interesting info about me:

• 🔭 I’m currently working in Warecorp in Poland, Krakow
• 🌱 I’m currently learning how to create cool and performant Node JS (Nest JS) applications
• 💬 Ask me about React and React Native applications. Happy to help.
• 📫 How to reach me: [email protected] or linkedin
• 😄 Pronouns: he\him

trueanimation's Issues

Bug with stacking `transition` property

1. Short description

Lib has been tested with slider animation. Toggling square to left and right with margin-left property.

2. Expected Behavior

Slider must move from the left side to the right and backwards, using for this method start () and undo ()

3. Real Behavior

If user clicks on square a lot, when first animation is not ended, transition property begins to represent string that just copy pasted a lot of times.
It should look like that

transition: transform 0.1s ease-in 0s, margin-left 0.7s ease-out 0s;

Looks like that

transition: transform 0.1s ease-in 0s, margin-left 0.7s ease-out 0s, margin-left 0.7s ease-out 0s;

Property value duplicated.

4. How to reproduce issue

Make slider or just simple square and try to manipulate with square with margin-left. Use Boolean
variable to control position. When square on the left side => false, when on the right side => true.

Problem with `hover` effect and `transform: scale()` property

1. Short description

Lib has been tested for transform property. If property have value in CSS Rule hover, and transform also have an animation with lib, after animation end hover effect isn't working more.

2. Expected Behavior

Making square transformed with hovering in CSS and making an animation with lib with transform property

3. Real Behavior

Hover effect doesn't work after lib animation end.

4. How to reproduce issue

Make a simple square
Set CSS Rule for square ( hover effect with transform, for example transform: scale(1.1))
Make lib animation with transform property (for example transform: scale(1.1) too)

Not correct saving transition property

Not correct saving transition string.
[element].style.getPropertyValue('transition')
works only with inline styling