Skip to main content
Damon Goss
Participant
Aug 17, 2021 7:49 PM UTC
Answered

Recreate Text Animation for website.

Anyone have an idea how to recreate this animation on the words "What's New" on the Adobe XD update page? I have provided the link below. I do not believe it is a GIF because I can still highlight the text and copy it. 

Adobe XD Update Page 

 

I want to add that same animation to my copy portfolio website and publish it. This website was made in webflow, I have posted to their community forum as well but, I thought someone in adobe might know in case no one hase an answer on their side. 

    This topic is closed to new replies. Start a new post to keep the conversation going.
    thatsmauri
    thatsmauriCorrect answer
    Community Expert
    Aug 17, 2021 9:11 PM UTC

    I've digged a bit through the code there. It's actually a SVG animation: 

     


    This example code is basically from the site, but stripped to the bare minimum:


    HTML:

    <div class="bg-container">
         <div class="knockout-text width">
              <h1 style="text-align: center;">What's</h1>
              <h1 style="text-align: center;">New.</h1>
         </div>
    </div>

     

    CSS:

    .bg-container {
         background-image: url('https://www.adobe.com/content/dam/cc/us/en/products/xd/features/whatsnew/banner_animation_02.svg'); //For testing only - replace this link with your own SVG animation!
         background-size: cover;
         background-position: 50% 50%;
    }

    .knockout-text {
         mix-blend-mode: lighten;
         background: #fff;
    }

    .width {
         width: 100%;
    }

    View reply

    12 replies

    thatsmauri
    Community Expert
    thatsmauriCommunity ExpertCorrect answer
    Community Expert
    Aug 17, 2021 9:11 PM UTC

    I've digged a bit through the code there. It's actually a SVG animation: 

     


    This example code is basically from the site, but stripped to the bare minimum:


    HTML:

    <div class="bg-container">
         <div class="knockout-text width">
              <h1 style="text-align: center;">What's</h1>
              <h1 style="text-align: center;">New.</h1>
         </div>
    </div>

     

    CSS:

    .bg-container {
         background-image: url('https://www.adobe.com/content/dam/cc/us/en/products/xd/features/whatsnew/banner_animation_02.svg'); //For testing only - replace this link with your own SVG animation!
         background-size: cover;
         background-position: 50% 50%;
    }

    .knockout-text {
         mix-blend-mode: lighten;
         background: #fff;
    }

    .width {
         width: 100%;
    }

    Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Aug 17, 2021 9:26 PM UTC

      Yes, but that's only a very small part of the code.

       

      Translate
      Nancy O'Shea— Product User & Community Expert
      thatsmauri
      Community Expert
      thatsmauriCommunity Expert
      Community Expert
      Aug 17, 2021 9:39 PM UTC

      It should still work even with this small part. The original one had many other CSS fields that are likely not needed for the original poster's case.

       

      Alternatively...

       

      HTML

      <p class="animated-text">Whats New</p>

       

      CSS

      .animated-text {
           background-image: url('https://www.adobe.com/content/dam/cc/us/en/products/xd/features/whatsnew/banner_animation_02.svg');
           background-size: cover;
           background-position: 50% 50%;

           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           text-align: center;
      }

       

      Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Aug 17, 2021 8:56 PM UTC

      Your example is built with advanced custom code.

       

      Does Webflow allow you to use custom code in projects?  I don't know, never used it.  

       

      You could script something similar with HTML text, CSS clip paths and CSS keframe animations:

      https://blog.logrocket.com/guide-to-css-animations-using-clip-path/

       

      Another option might be to use an animated SVG, if Webflow supports SVG code.

      https://svgartista.net/

       

      Hope that helps.

       

      Translate
      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices