Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

WordPress landing page

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 09:50
Credits
10,483
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
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 10:50
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
You can also animate SVGs with a simple animateTransform or similar tags.

 
  • Like
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 09:50
Credits
10,483
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
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 10:50
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
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
 
  • Haha
Reactions: Adam

Talia

Member
Joined
Jan 21, 2020
Messages
83
Reaction score
75
Points
30
Location
United States
Local Time
Today, 03:50
Credits
392
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:
  • Like
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 09:50
Credits
10,483
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. 🙂
 
  • Like
Reactions: Talia

RobinHood

Member
Joined
Jan 6, 2020
Messages
26
Reaction score
12
Points
8
Credits
57
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
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 09:50
Credits
10,483
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:
  • Love
Reactions: RobinHood

RobinHood

Member
Joined
Jan 6, 2020
Messages
26
Reaction score
12
Points
8
Credits
57
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
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 09:50
Credits
10,483
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
Joined
Jan 6, 2020
Messages
26
Reaction score
12
Points
8
Credits
57
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

 
  • Love
Reactions: Adam

tobyx

🌱
Gold Member
Joined
Oct 6, 2019
Messages
9
Reaction score
6
Points
255
Location
Berlin, Germany
Local Time
Today, 10:50
Website
tobyx.net
Credits
35
Pronouns
he/him
Real Name
Tobias Horvath
Many great tips in this topic.

Adam, that looks great.
RobinHood, that also looks great.
 
  • Love
Reactions: Adam
Top