正在加载视频...

视频加载失败

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,685 次观看 • 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 年前