Abdimajid

Frontend developer blending design, motion & code to craft beautiful, functional interfaces. • Available for work.

[Abdimajid @abdmjd_]

@jeantimex can we get the link to the code?

[Abdimajid @abdmjd_]

@Sameerjs6 @emilkowalski I think it makes sense. option A animates the elements in one by one guiding the user's eye and allowing them to focus on one thing at a time.

[Abdimajid @abdmjd_]

@emilkowalski I got everything right. this was a great exercise.

[Abdimajid @abdmjd_]

@steveruizok can I ask how you did this?

[Abdimajid @abdmjd_]

@rebane2001 oh yeah. I forgot about that.

[Abdimajid @abdmjd_]

late post but last week I got my first component merged into @dillionverma 's @magicuidesign 🎉

the Backlight component adds a glow effect behind videos, images & SVGs that mirrors the content's colors

you can check it out here
https://t.co/jx1P4uonK0

[Abdimajid @abdmjd_]

@birch_js yep.

here's a codepen
https://t.co/vTFa4y39qY

[Abdimajid @abdmjd_]

@UnwiredTiger @birch_js here you go
https://t.co/vTFa4y39qY

[Abdimajid @abdmjd_]

@pqoqubbw great work brother. I really appreciate this kind of attention to detail.

[Abdimajid @abdmjd_]

@fredrikalindh couldn't they have used CSS with 2 spans?
the first span contains the trancated text with these styles:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

and a second span contains the last part of the text that you want to always stay visible

[Abdimajid @abdmjd_]

@micka_design fair enough. I'll give it a try as well.

[Abdimajid @abdmjd_]

@TimGuignard @stitchbygoogle Yep. it's a really simple but nice effect.
I actually created pretty much the same effect with the same approach a while ago in a codepen.

https://t.co/758ODAPMSS

[Abdimajid @abdmjd_]

@saltyAom Make a bad apple transition, and maybe I will use that.

[Abdimajid @abdmjd_]

@fedorivanenko_ how are you checking if the element is in 'sticky' mode?

[Abdimajid @abdmjd_]

@mattyp Isn't ffmpeg.wasm like 20mg? How are making it smaller

[Abdimajid @abdmjd_]

@pqoqubbw @tekbog Damn. that's tough.