Hello,
I am trying to create a logo for my business and I want it to start with outlining the name and then having the color gradually come into the outlined letters. I thought I got it figured out by recording while I change the color but when I went to preview it the color was there first with no fading in and then the outline happened. Wondering what can be done.
Here is an example on how to do that using the built in vector tool…
FadeInFontAfterLineBuildUp.hype.zip (24,9 KB)
If you have a premade logo from an external vector tool I would do it differently, though. Retracing the whole logo could become very time-consuming … in that case I would stick the SVG into a Hype rectangle and use Anime.js
2 Likes
Another great reference example:
1 Like
Hi Max,
Thank you for your help! As I am new to this animation world what is anime.js and what would putting the logo into the hype rectangle function for?
Thanks!
Hype can do it all if you trace the logo as demonstrated and @Hypertastic also posted the great example how good it can look if you put some time into it. If you are not familiar with anime.js then don't worry… ignore it. It is nothing Hype specific but a helper that can offer a shortcut on existing logos but it would require some coding knowledge.
Thank you so much! I had another questions. When you do this but see the preview of it in safari it doesn't fade the background color into it it just has the background color already in on it. AmI doing something wrong?
If you are talking about my sample file from last week… I am looking at it on Safari (v12.0) and it looks fine… this is an GIF I recorded with my screen recorder (not export):
BTW here is an old animation… it also contains some outline text animations:
https://blog.tumult.com/wp-content/uploads/2018/vectorcontestwinners/Waves_And_Echos.html
Continuing the discussion from Logo line drawing with background color:
2Screen Recording 2020-10-01 at 1.32.46 PM
Here is what is happening to me when I preview it.
Could you share that file?
Sorry, I was talking about the Hype file. Please zip it before dropping it in here.
Millz Logo.html.zip (1.1 KB)
Does this work?
No the .hype-file you are working on (seen above in your video) 
Zip that file and drop it here. Or just edit your last post and put it in there to avoid a long thread of confusion. I'll replace this with my findings… if any turn up.
You will have to bare with me! Sorry! ahaha! I feel like its correct but...
Millz Logo1 2.zip (176.2 KB)
Millz Logo1-fixed.hype.zip (179,4 KB)
@jonathan please have a look at the file in the previous post. It does seem to be a bug! I had to remove the color key frames and recreate them. Then it worked… so somehow the key frames got corrupted.
1 Like
Thanks - taking a glance I bet this got triggered from changing to/from gradient in the animation (we've had a long-standing issue with that). I've filed this and expect that I'll be able to work out steps to reproduce.
1 Like
Hi Jonathan,
Was I doing anything wrong or was it more of a back end error?
Thanks!
This is not your fault, definitely a program bug 
.