Загрузка видео...

Не удалось загрузить видео

На главную

Introducing Auto Layout in Anime.js v4.3! - Animate display flex / grid / none, etc. - Enter / Leave animations - Animate DOM position changes - Interruptible animations - Staggered children animations - Supports any easing functions - Dead simple API Link below ⬇︎

296,553 просмотров • 9 месяцев назад •via X (Twitter)

Комментарии: 40

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

Docs: Release notes: @CodePen examples:

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

If the periodic table looks familiar it's because it's a port of this @threejs demo: ! Anime.js version:

Фото профиля Pasquale D’Silva
Pasquale D’Silva9 месяцев назад

you are a beast

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

Haha thank you professor 🙂‍

Фото профиля lugii
lugii9 месяцев назад

hello someone made a Bags coin for you to support your work!

Фото профиля Madhav Shroff
Madhav Shroff9 месяцев назад

Again… course whennnnn?? 😭😭😭 Banger updates tho

Фото профиля Madhav Shroff
Madhav Shroff9 месяцев назад

Epiccc

Фото профиля Adetunji | Software Engineer (Web & Mobile)
Adetunji | Software Engineer (Web & Mobile)9 месяцев назад

This is really cool It would save me so much time when working with height reduction animations in animejs

Фото профиля Nicolas Jesenberger
Nicolas Jesenberger9 месяцев назад

Huge, love the demos!

Фото профиля Carlo Taleon
Carlo Taleon9 месяцев назад

ayoo? Layout animations for any JS framework now!

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

Apparently !

Фото профиля Rayman👾
Rayman👾9 месяцев назад

hey Julian! someone created a @BagsApp coin for you. Bags help developers to fundraise their projects, get in touch with @finnbags for more info you can see what @izs did not even 24h using BagsApp or for example what @Steve_Yegge did with Gas. They both raised more than $100k and they are not the only ones

Фото профиля Eason Chai
Eason Chai9 месяцев назад

Let’s hope more AI knows how to use animejs cuz it’s freaking lit

Фото профиля Thirdpen
Thirdpen9 месяцев назад

this is dope 😍

Фото профиля Jad Bitar
Jad Bitar9 месяцев назад

Can’t wait to try this! Thank you 👏👌

Фото профиля Kevin Seabourne
Kevin Seabourne9 месяцев назад

does it work with solid.js ? @JulianGarnier

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

Apparently yes, auto layout animations in @solid_js ! @RyanCarniato

Фото профиля zkespresso
zkespresso9 месяцев назад

@kevinseabourne @solid_js @RyanCarniato What are you using to record & zoom like this? Looks sexy

Фото профиля Julian Garnier
Julian Garnier9 месяцев назад

@kevinseabourne @solid_js @RyanCarniato @screenstudio !

Фото профиля tobto
tobto9 месяцев назад

That's awesome 😎

Фото профиля Aaliya
Aaliya9 месяцев назад

This looks really cool! Can’t wait to try it in my projects.

Фото профиля Rohit
Rohit9 месяцев назад

this is so fucking good

Фото профиля Omar
Omar9 месяцев назад

beauuuuuuuuuuuuutiful 🤩

Фото профиля Sebastian Buzdugan
Sebastian Buzdugan9 месяцев назад

position change animations alone make this super compelling

Фото профиля boom
boom9 месяцев назад

Anime.js is still one of my favourite websites

Фото профиля Webiny Enterprise CMS+ ⚡️
Webiny Enterprise CMS+ ⚡️9 месяцев назад

Nice evolution of anime.js. Looks like a serious step forward for UI animation ergonomics.

Фото профиля hārmañ
hārmañ9 месяцев назад

Fire 🔥

Фото профиля Hieu Nguyen
Hieu Nguyen9 месяцев назад

looks sick!

Фото профиля Koru Language
Koru Language9 месяцев назад

This looks INCREDIBLE!

Фото профиля ReverseAI
ReverseAI9 месяцев назад

Anime.js v4.3 Auto Layout - flex/grid/none animations, enter/leave, position changes, interruptible. DOM-aware staggering; simple API.

Фото профиля Ditectrev
Ditectrev9 месяцев назад

This is Huge!🔥🔥

Фото профиля Its pyy
Its pyy9 месяцев назад

Hello @JulianGarnier! We truly want to inform you that is was community that created $ANIMEJS and it was created purely to support your outstanding works as a developer! Yes, you didn’t create it. Although, there are royalties attached that we want to direct to you to further support your development. you can see what @izs did not even 24h using BagsApp or for example what @Steve_Yegge did with Gas. They both raised more than $100k and they are not the only ones

Фото профиля MAGUID
MAGUID9 месяцев назад

Auto Layout looks insanely powerful

Фото профиля Jason Ho
Jason Ho9 месяцев назад

somebody stop this dood. he's cooking too hard.

Фото профиля Steve Oak
Steve Oak9 месяцев назад

great demo vid how is it different from motion js?

Фото профиля aditya addepalli
aditya addepalli9 месяцев назад

you’re gonna feed countries with the way you’re cooking 🔥

Фото профиля Mike Sewell
Mike Sewell9 месяцев назад

Unreal

Фото профиля Matin Tat
Matin Tat9 месяцев назад

Yooo. Does it work with react? Specially exit animations?

Фото профиля nico
nico9 месяцев назад

this is dope will fs be looking into this more

Фото профиля ℜ𝔞𝔣𝔞𝔢𝔩🪽
ℜ𝔞𝔣𝔞𝔢𝔩🪽9 месяцев назад

hmm👀

Похожие видео

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @​property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @​supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @​keyframes show-cta { to { --show: 1; } } } Using @​supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

133,020 просмотров • 2 лет назад