Skip to main content
D
Damon Goss
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
      Nancy OSheaCommunity 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
      thatsmauriCommunity 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
      Nancy OSheaCommunity 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
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices