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.
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.
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
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.
Hope that helps.
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%;
}
Copy link to clipboard
Copied
Yes, but that's only a very small part of the code.
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;
}
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;
}
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>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
CSS Ticks has a complete code explanation of a Responsive Knockout Text that uses a looping background video.
https://css-tricks.com/responsive-knockout-text-with-looping-video/
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!
Copy link to clipboard
Copied
...i was able to just clip that svg into my text...
============
You mean you stole Adobe's assets for your own use? Uh, oh.
Copy link to clipboard
Copied
No I created my own for it I just needed to know how to "recreate" as the post says.
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.