Skip to main content
Participant
August 17, 2021
Answered

Recreate Text Animation for website.

  • August 17, 2021
  • 2 replies
  • 2462 views

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 has been closed for replies.
    Correct answer thatsmauri

    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%;
    }

    2 replies

    thatsmauri
    Community Expert
    thatsmauriCommunity ExpertCorrect answer
    Community Expert
    August 17, 2021

    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%;
    }

    Nancy OShea
    Community Expert
    Community Expert
    August 17, 2021

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

     

    Nancy O'Shea— Product User & Community Expert
    thatsmauri
    Community Expert
    Community Expert
    August 17, 2021

    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;
    }

     

    Nancy OShea
    Community Expert
    Community Expert
    August 17, 2021

    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.

     

    Nancy O'Shea— Product User & Community Expert