Kevin Powell - Community•12mo ago

Animation text

Can anyone tell me how to make this animation? Thank you so much

9 Replies

conmeomaunauOP•12mo ago

everyone can help me , please

Nihan•12mo 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

conmeomaunauOP•12mo ago

I tried transform property but it's not the same effect no , when page loaded , this animation will run

Nihan•12mo 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

conmeomaunauOP•12mo ago

https://placeholder-portfolio.webflow.io/

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.

conmeomaunauOP•12mo 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•12mo 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

conmeomaunauOP•12mo ago

thank you

Nihan•12mo ago

cool

Gaming

Programming

Animation text

Did you find this page helpful?