Recreate Text Animation for website.

Community Beginner ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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. 

Views

487

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 17, 2021 Aug 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

...

Likes

Translate

Translate
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

quote

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

 


By @thatsmauri

 

 

Try the below. I'll let you add the image src where it says 'ADD IMAGE SOURCE' in the code, as I suspect its copyrighted, so you shouldn't be using it!! You should find one that is free to use.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knockout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap" rel="stylesheet"> 
<style>
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.knockOut {
position: relative;
width: 40%;
margin: 0 auto;
background-color: yellow;
height: 400px;
}
.knockOut img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.knockOut h2 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 115px;
line-height: 115px;
text-align: center;
font-weight: 800;
color: #000;
background-color: #fff;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<section class="knockOut">
<img src="ADD IMAGE SOURCE">
<h2>What's<br>New.</h2>
</section>
	
</body>
</html>

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

@osgood_ 

Your point about using assets from Adobe's or any other site is a good one.  That's not allowed.

 

Of course we still don't know how much support Webflow has for custom code. So in the end, some Webflow compatible widget or plugin might be the best option.

https://university.webflow.com/integrations/svgator

https://www.svgator.com/help/getting-started/add-animated-svg-to-webflow

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 18, 2021 Aug 18, 2021

Copy link to clipboard

Copied

quote

Of course we still don't know how much support Webflow has for custom code. So in the end, some Webflow compatible widget or plugin might be the best option.

https://university.webflow.com/integrations/svgator

https://www.svgator.com/help/getting-started/add-animated-svg-to-webflow

 

By @Nancy OShea

 

I don't know much about Webflow but I believe it does have an option to include your own custom code, if required. I don't take Webflow that seriously on account of its 'hosted' software, not a standalone bit of software. If it was a standalone bit of software it would spark my interest to investigate it further. That's the problem with most of these 'low-code/no-code' alternatives, few offer a standalone product, at least in that respect that's where Wappler shines.

 

Maybe some day soon some company will come up with a 'low-code/no-code' solution that is not only standalone but doesn't use niche/proprietory code, that's when it becomes more attractive to me.

 

Seems like the OP found the answer, which looks to be more streamlined than the one I proposed. That's where we are at theses days, knowing too much can lead to over-engineering the solution and making things more complex than it strictly should be, it's appearing everywhere unfortunately and I'm as guilty as the next, making it look more difficult that it really is ......... phewwww!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

CSS Ticks has a complete code explanation of a Responsive Knockout Text that uses a looping background video. 

image.png

https://css-tricks.com/responsive-knockout-text-with-looping-video/

 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

I found that too i was able to just clip that svg into my text so it worked perfectly thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2021 Aug 21, 2021

Copy link to clipboard

Copied

quote

...i was able to just clip that svg into my text...

============

You mean you stole Adobe's assets for your own use?  Uh, oh.

 

giphy

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 22, 2021 Aug 22, 2021

Copy link to clipboard

Copied

LATEST

No I created my own for it I just needed to know how to "recreate" as the post says.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2021 Aug 21, 2021

Copy link to clipboard

Copied

As I wrote in the code, it is just meant for TESTING. Make sure to replace it with your own because of said possible copyright infringement.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
express Get Adobe Express free

Easily make social graphics, flyers, logos, and more from thousands of free templates.

Get free app
Free to use, no credit card required