DEV Community

Cover image for Throwing around text - Kinetic typography part 2: Tricking gravity thanks to matter.js! 📃🛫🤯

Throwing around text - Kinetic typography part 2: Tricking gravity thanks to matter.js! 📃🛫🤯

Pascal Thormeier on January 30, 2022

Part 2 of my series about kinetic typography! Let's move some text around with HTML, CSS and JS! If you missed how I came about throwing around te...
Collapse
 
thegrizzler profile image
theGrizzler

Hey, I created this account just to comment here. I followed along with the article but I seem to have been stuck. In toBody() Bodies.fromVertices() expects a Matter.Vector[][], but toVertices returns a Matter.Vector[]. Even Vertices.scale(), used in the codepen, returns Matter.Vector[]. I tried looking up but matterjs has terrible docs apparently. If you could help me I would appreciate it a lot. Thanks.

Collapse
 
thormeier profile image
Pascal Thormeier

Hey, thank you for the feedback and for your time. I'm sure we can debug this.

First, Codepen uses matter.js 0.18.0. Since the post is already over two years old, I assume you're using a newer version. What version do you have installed?

Collapse
 
thegrizzler profile image
theGrizzler • Edited

Hey again. I was using version 0.19.0 when I tried this. This was in sveltekit. I did not continue beyond the toVertices() and toBody() func code you provided since that is where I encountered the errors. I could provide the actual code I had if you need.

Collapse
 
div_100 profile image
Divyansh Choudhary

I second this @eioluseyi

Collapse
 
jerzakm profile image
Martin J • Edited

Cool! This is a little similar to something I've done a few months back with Rapier.rs

If you plan to do more things with physics I highly recommend checking rapier, from my experience performance is much better than matter.js (wasm!).

demo elastic-banach-bbcb85.netlify.app/ (press let's get physical to start, only desktop)
repo github.com/jerzakm/rapier-dom-physics

Collapse
 
thormeier profile image
Pascal Thormeier

Oh wow, that's amazing! Although it's a bit hard to press the "close" button on the magenta box when physics is turned on 😜 Will definitely have a look, thank you for the recommendation!

Collapse
 
jerzakm profile image
Martin J

Oh yeah, it's definitely hacky and not user friendly. Yet another unfinished idea waiting for it's turn on a forever growing list :D

Collapse
 
eioluseyi profile image
Emmanuel Imolorhe | EIO

Challenge: Can anyone figure out what font I used? Hint: It's a Google Font.

I think the font is a regular sans font for which you made an edit to the letter "D" and the path for the letter O didn't close completely.
I call Roboto!

Collapse
 
thormeier profile image
Pascal Thormeier

Correct! I at least tried to fix these letters, Matter.js is doing weird things with composite/hollow bodies, that's why the letter "D" and "O" look off. But, it's indeed Roboto!

Collapse
 
eioluseyi profile image
Emmanuel Imolorhe | EIO

Oh..
Let's hope that subsequent updates would fix that on their end.
However, the resulting effects on those letters are not that bad either; plus it made the challenge even tougher! 😂

Collapse
 
eioluseyi profile image
Emmanuel Imolorhe | EIO
Collapse
 
thormeier profile image
Pascal Thormeier

Thank you for linking this tool! Gotta retry soon with that and see if it works better than my Sisyphean approach with trial and error until it looks halfway decent lol