alexfoxy / lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
MIT License
10.41k stars 491 forks source link

Doesn't work with object already translated #9

Closed worldoptimizer closed 5 years ago

worldoptimizer commented 5 years ago

I think this my just be a overhead on these elements and this library shouldn't care about them… on the other hand having elements already defining translation etc. respected would maybe broaden use cases.

alexfoxy commented 5 years ago

Yes this is true. Are you expecting to merge values or combine keys?

alexfoxy commented 5 years ago

@MaxZiebell did you have any further thoughts on this?

worldoptimizer commented 5 years ago

Lax could take the given offsets on init and add them to it's own animation. Not sure if that is viable without bloating.

alexfoxy commented 5 years ago

Yea makes sense, it would have to take the original css value e.g. "translateX(12pt) scale(1)" and then mix in its own values somehow. Do you have a specific example?

worldoptimizer commented 5 years ago

Yes but one I can't share at this point but it boils down to any element using positions with translation or other CSS values and it would be good practice to respect any preexisting values. Also has the nice side effect that you can do layouts and lax presets would work relative to the initial conditions. Like if you had a text rotated -90degrees … it would start a turn from there and not reset it to the lax setting.

alexfoxy commented 5 years ago

It seems a bit weird to be using translate to position stuff, it should be used for animations. I hear your point tho and I've had a look but need to change a bit of implementation to get it to work.

worldoptimizer commented 5 years ago

In theory your right but the world is a messy place with many CSS hack like this one https://css-tricks.com/centering-percentage-widthheight-elements/ … This is just one example using translation to hack its way to a specific goal.

alexfoxy commented 5 years ago

Yes, I'll have to see how I can work it out. You'd have to convert something like that hack to real pixel values.

On Fri, 22 Mar 2019 at 16:11, MaxZiebell notifications@github.com wrote:

In theory your right but the world is a messy place with many CSS hack like this one https://css-tricks.com/centering-percentage-widthheight-elements/ … This is just one example using translation to hack its way to a specific goal.

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/alexfoxy/laxxx/issues/9#issuecomment-475681217, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJQ3MUh3s296VhlqIyhjivXigKO4MdBks5vZQC1gaJpZM4b7EDP .

worldoptimizer commented 5 years ago

Don't beat yourself up over it. Unless your trying to build an all purpose tool we can live with it. One just needs to remember it when using lax. For my purpose I already worked around it. Consider size and complexly vs simplicity and lightweight of this against each other. Iax is also cool because it's small and fast. When nobody else runs against this it might just be fine the way it is!

alexfoxy commented 5 years ago

Of course. Just want the library to feel like it just works.. ;D

alexfoxy commented 5 years ago

I think I have worked out a way. Will be in next update.

alexfoxy commented 5 years ago

Fixed in 1.2.0 release