Animation text

Can anyone tell me how to make this animation? Thank you so much
9 Replies
conmeomaunau
conmeomaunau10mo ago
everyone can help me , please
Nihan
Nihan10mo ago
hmm. What do you have so far? I also I can't see if its triggered by scrolling or just a one time thing
conmeomaunau
conmeomaunau10mo ago
I tried transform property but it's not the same effect no , when page loaded , this animation will run
Nihan
Nihan10mo ago
Well you will have to figure out what the animation is actually doing. Can look into the browser code and probably let the browser 'break' when something changes. Can also use browser dev tools to analyse the animation and then you can replicate with code. Basically throw the entire thing in a small timeline and do that.. I think you might be able to pull off most of it by css
conmeomaunau
conmeomaunau10mo ago
Placeholder - Webflow HTML website template
Placeholder is a minimalist Webflow template focused on delivering a memorable experience. Portfolio suited for creatives, designers, agencies, photographers, models.
conmeomaunau
conmeomaunau10mo ago
Maybe my knowledge is not enough, I can't find animaton on this page, I only see transform property Can you help me see the animation in this website?
Nihan
Nihan10mo ago
it's okay, if you don't know lol. I don't know a lot of things It is using the transform property to animate actually. And it is using js
<div data-w-id="17c8c98e-3aa4-05bb-4033-1eccd9aeb8b5" class="preloader-animation" style="height: 5.5em;">
<div data-w-id="eb3aa294-9f38-d112-1f2c-7f2dd14a03b8" class="home-title-wrapper" style="transform: translate3d(0px, -11.5em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<div data-w-id="81bdf598-bb63-b697-31f7-e897685054ef" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="81bdf598-bb63-b697-31f7-e897685054f0" class="big-heading is-preloader" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Digital</h1>
</div>
<div data-w-id="95a9449b-2f82-dc3c-9a23-0b636bc4ea79" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="95a9449b-2f82-dc3c-9a23-0b636bc4ea7a" class="big-heading is-white" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Studio</h1>
</div>
<div data-w-id="306eb8c3-3cce-d1d7-2e82-fe5f368544c4" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="306eb8c3-3cce-d1d7-2e82-fe5f368544c5" class="big-heading is-white" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Placeholder©</h1>
</div>
</div>
</div>
<div data-w-id="17c8c98e-3aa4-05bb-4033-1eccd9aeb8b5" class="preloader-animation" style="height: 5.5em;">
<div data-w-id="eb3aa294-9f38-d112-1f2c-7f2dd14a03b8" class="home-title-wrapper" style="transform: translate3d(0px, -11.5em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<div data-w-id="81bdf598-bb63-b697-31f7-e897685054ef" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="81bdf598-bb63-b697-31f7-e897685054f0" class="big-heading is-preloader" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Digital</h1>
</div>
<div data-w-id="95a9449b-2f82-dc3c-9a23-0b636bc4ea79" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="95a9449b-2f82-dc3c-9a23-0b636bc4ea7a" class="big-heading is-white" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Studio</h1>
</div>
<div data-w-id="306eb8c3-3cce-d1d7-2e82-fe5f368544c4" class="title-wrapper" style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">
<h1 data-w-id="306eb8c3-3cce-d1d7-2e82-fe5f368544c5" class="big-heading is-white" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;">Placeholder©</h1>
</div>
</div>
</div>
@conmeomaunau This is the code, just study how the transform properties are working and you should be good
conmeomaunau
conmeomaunau10mo ago
thank you
Nihan
Nihan10mo ago
cool
Want results from more Discord servers?
Add your server