"Self drawing" logo wintershalldea.com

I recently came across the wintershalldea.com website. There’s a logo at the top in the middle that is animated in a self drawing way when opening the site. How can this be managed with RW using what stacks. It’s not an animated gif. Anybody who can give me a hint?
I like the wave effect on the page too. What stack would be able to create this effect?

Its an SVG ( Scalable Vector Graphic ) format. A modern way to create graphical/visual effects which scale (resize) according to the screen size of the viewer with no loss of fidelity.

What you see there is created entirely in code which describes the paths and other instructions relating to timings and animations - which combine in a way the browser can interpret and render.

The sequence of numbers and values here shows what I mean: -

Here is a good intro course for how to acquire the skills needed to create these:
https://www.udemy.com/course/learn-svg-animation/

You are going to want to be at least a little bit comfortable with HTML/CSS/JS first though.

I recall that there is/was a forum member (was it Paul R?) who has crazy skills making these and has used them to astonishing effect in his off-the-scale projects.

If you use Stacks then its especially easy to include your creations in your projects. I tend to use CodePen as a playground whenever I am making these.

You can also hire folks to make them for you to spec - then just integrate the code they send you:

Good luck!

1 Like

You can see my implementation of a wave effect here: https://www.goodfriendsofgeorgetowncounty.org

The stack is Waves. More information here: https://wondrousss.info/waves/

1 Like

Hi @Vibemaster,

Being the lazy person I am, I thought this might be an easy route. I’m making an assumption you have Apple Keynote (I could be wrong but you can get it for free now). I used iPad with Keynote to create a single page presentation where I traced over my signature with a stylus. Then selecting it, I chose the line draw animation. Finally, export the slide as a gif. Admittedly this is very rough and exported at 24fps to make the gif, but playing with it, you could get faster or slower versions.

Hope this is either useful or derisory!!
sigtest

1 Like

You might try this: https://www.youtube.com/watch?v=FEblK6Qo3KQ

Could some one pleas help.
A Question about Stakes and its add ons.

I have my iMac and my MacAir both with the same RapidWeaver 8.xx
If i download Stakes etc on the iMac can i also use at same time on MacAir

It would have been better to start your own thread with your question. You’ve now posted it to 4 different threads that are completely related to your question.

I know a single user can use Stacks on at least 2 computers. I don’t know if there is a limit. I believe it’s licensed to an individual, and as long as you’re the only user you can use it from multiple computers. It’s possible that your email didn’t get to their support system, as they are very good at answering questions. @isaiah can give you more information on their official policy.

2 Likes

@Vibemaster you could do it quite easily with an animated GIF. Here is one I made in about 5 minutes. I started with the complete signature and then rubbed out bits of it, saved, rubbed more out, etc. I then put them in the free Animatrice app from the app store. The secret is to start at the end and work back. Save the first file as, say 30.gif, the next as 29.gif, etc.
animatedSignature

2 Likes

Thank you
I know plus many emails but you are first to replay

@DAS David,

First off, most of the threads you are replying to have absolutely nothing to do with your question.
Secondly, you posted the same question on multiple threads within a very short time period.
Thirdly, did you try and search the forum before asking? I think you probably would have found the answer or at least have found a thread about the question.

If you want a more complete answer like @DLH Don said create a new topic.

1 Like

Thank you Peter, I like the method you’re using. I’ll try this. Would still be nice to have a stack that let me animate svg files without needing to code myself. But you’re workaround is not too complicated.

Have a look at Hype - https://www.multithemes.com/examples/stacks/hypetitles/

Rob

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.