WordPress landing page

[Adam]

So I recently found out that you can animate SVG just by putting a <style></style> tag with some animation right inside your SVG file. I have been having quite a bit of fun with that! I created this landing page recently with some simple animations (clouds & lights in header, floating super hero).

Emergency WordPress Support from £15 | No Fix No Fee | Adam Greenough 🦸🏼‍♂️

Online Now! Affordable prices from just £15 for a one-off fix. I’m a WordPress expert from the UK with over 10 years of experience in fixing and maintaining WP websites.

adamgreenough.me

Would really appreciate your feedback as always! 🙂

The bases for the illustrations were acquired from:
Secure cloud storage metaphor flat illustration by BoykoPictures on Envato Elements
Night city by the mountains - vector illustration by BoykoPictures on Envato Elements

 

[Gummibeer]

You can also animate SVGs with a simple animateTransform or similar tags.

https://studiopolster.de/images/home.svg?id=b787f74056c347079935

Studio Polster

Wir sind ein kleines leistungsstarkes Designstudio in Aumühle, Hamburg. Wir bieten: Grafikdesign, Corporate Design, Editorial Design, Webdesign, Illustration, Infografik, Fotografie, Naming, Logo-Entwicklung, Kommunikation im Raum und digitale Markenentwicklung.

studiopolster.de

 

[Adam]

You can also animate SVGs with a simple animateTransform or similar tags.

https://studiopolster.de/images/home.svg?id=b787f74056c347079935

Studio Polster

Wir sind ein kleines leistungsstarkes Designstudio in Aumühle, Hamburg. Wir bieten: Grafikdesign, Corporate Design, Editorial Design, Webdesign, Illustration, Infografik, Fotografie, Naming, Logo-Entwicklung, Kommunikation im Raum und digitale Markenentwicklung.

studiopolster.de

Yeah that way is definitely a bit more slick! I stuck with embedded CSS for browser support though which is basically universal for a long time. Looking forward to animateTransform becoming more widely acceptable! Can I use... Support tables for HTML5, CSS3, etc

 

[Gummibeer]

My benefit: I never care about users using browsers not supporting the current technology. It's the users fault and I also blame him for not using one of the browsers doing a good job. So every issue from Safari, IE or Edge users is immediately muted. :D

 

[Gummibeer]

@Adam no idea where to put it, but seems like a WordPress cloud hoster: Cloud Platform

Haven't tested it, but you came to my mind. 😅

 

[Gummibeer]

Possibly your "first" gig @Adam 😉🎉

http://imgur.com/a/lkutqxI

 

[Adam]

Danke! ♥ Du bist auch ein cooler Typ. 😎

 

[Gummibeer]

Danke! ♥ Du bist auch ein cooler Typ. 😎

Best reply! 👍

 

[Talia]

Looks excellent. Great graphics and visual design, nice subtle animations, and the superhero motive is really fun. I bet you'll get some business with it. :)

My only criticism is that, I think for accessibility, you should always have a way to pause animations. Not to say I always follow that myself, but it's something to consider.

 

[Adam]

Looks excellent. Great graphics and visual design, nice subtle animations, and the superhero motive is really fun. I bet you'll get some business with it. :)

My only criticism is that, I think for accessibility, you should always have a way to pause animations. Not to say I always follow that myself, but it's something to consider.

Thanks so much! Great point on accessibility. I do have it on my to-do list to make use of the prefers-reduced-motion media query to turn those off. 🙂

 

[RobinHood]

So I recently found out that you can animate SVG just by putting a <style></style> tag with some animation right inside your SVG file. I have been having quite a bit of fun with that! I created this landing page recently with some simple animations (clouds & lights in header, floating super hero).

Emergency WordPress Support from £15 | No Fix No Fee | Adam Greenough 🦸🏼‍♂️

Online Now! Affordable prices from just £15 for a one-off fix. I’m a WordPress expert from the UK with over 10 years of experience in fixing and maintaining WP websites.

adamgreenough.me

Would really appreciate your feedback as always! 🙂

The bases for the illustrations were acquired from:
Secure cloud storage metaphor flat illustration by BoykoPictures on Envato Elements
Night city by the mountains - vector illustration by BoykoPictures on Envato Elements

That's awesome!

Here's the code for anyone interested like I was:

    <style>
        g#hero {
            animation: float 3s ease-in-out infinite;
            margin-left: -10px;
        }
        
        g#wave {
            animation: float2 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(4px) translateX(-8px);
            }
              
            50% {
                transform: translateY(-4px) translateX(-6px);
            }
            
            100% {
                transform: translateY(4px) translateX(-8px);
            }
        }
        
        @keyframes float2 {
            0% {
                transform: translateY(-3px) translateX(5px);
            }
              
            50% {
                transform: translateY(3px) translateX(3px);
            }
            
            100% {
                transform: translateY(-3px) translateX(5px);
            }
        }
    </style>

So how did you go about executing this once you had the art?

Did those parts of the image already have the ID? if not, how did you find them etc? What was your workflow.

I've literally just finished designing a little testimonials page for a site with a load of svg graphics. It would be ace to be able to add some movement to it!

 

[Adam]

That's awesome!

Here's the code for anyone interested like I was:

    <style>
        g#hero {
            animation: float 3s ease-in-out infinite;
            margin-left: -10px;
        }
      
        g#wave {
            animation: float2 3s ease-in-out infinite;
        }
      
        @keyframes float {
            0% {
                transform: translateY(4px) translateX(-8px);
            }
            
            50% {
                transform: translateY(-4px) translateX(-6px);
            }
          
            100% {
                transform: translateY(4px) translateX(-8px);
            }
        }
      
        @keyframes float2 {
            0% {
                transform: translateY(-3px) translateX(5px);
            }
            
            50% {
                transform: translateY(3px) translateX(3px);
            }
          
            100% {
                transform: translateY(-3px) translateX(5px);
            }
        }
    </style>

So how did you go about executing this once you had the art?

Did those parts of the image already have the ID? if not, how did you find them etc? What was your workflow.

I've literally just finished designing a little testimonials page for a site with a load of svg graphics. It would be ace to be able to add some movement to it!

Thanks! I put the items in to groups (g) in Affinity Designer the graphics editor simply using the layers panel and when saving as SVG the elements stay with those ids. I believe the same works for illustrator. I run all SVG through SVGOMG - SVGO's Missing GUI as well to optimise them a bit for web. :)

 

[RobinHood]

Sweet, will give that ago on this new page I've been working on, super happy with the transformation a few high quality vector graphics can do to a page.

Getting a single vector pack on a certain topic that lead me down a really nice creative design path this evening, now I've just got to figure out how to make it work on a real page 🙈

 

[Adam]

Sweet, will give that ago on this new page I've been working on, super happy with the transformation a few high quality vector graphics can do to a page.

Getting a single vector pack on a certain topic that lead me down a really nice creative design path this evening, now I've just got to figure out how to make it work on a real page 🙈

Can't wait to see it! 😄

 

[RobinHood]

Can't wait to see it! 😄

It's getting there :D

 

[RobinHood]

Forgot to post an update to this, you can see all my animation fun live on this page now :)

Got:

• Swaying grass
• Moving waterfall
• Moving water fountain
• Flying owl
• Swaying hose
• Swaying plant leaves

Testimonials - Prestige Marble Company London

Read what people are saying about their experience with Prestige Marble London

prestigemarble.co.uk

 

[tobyx]

Many great tips in this topic.

Adam, that looks great.
RobinHood, that also looks great.