WordPress landing page

WordPress landing page

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

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).


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

Astroneer
Moderator
Local time
16:06
Joined
Oct 5, 2019
Messages
1,177
Pronouns
he/him

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


 

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

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

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

Astroneer
Moderator
Local time
16:06
Joined
Oct 5, 2019
Messages
1,177
Pronouns
he/him

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

 

Talia

Member
Local time
09:06
Joined
Jan 21, 2020
Messages
84

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.

 
Last edited:

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

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

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

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).


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:

Code:
    <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

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

That's awesome!

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

Code:
    <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. :)

 
Last edited:

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

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 🙈

 
Last edited:

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

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

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

Can't wait to see it! 😄

It's getting there :D

 

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

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

 

tobyx

🌱
Local time
16:06
Joined
Oct 6, 2019
Messages
9
Pronouns
he/him

Many great tips in this topic.

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

 
Top