Kevin Powell - Community•2y ago

Animation on svg icons

Hello coders. Unfortunately I lost too much time on this, and can't figure it out. Given the following codepen: https://codepen.io/Ionut-Sanda/pen/ZEPjXKp?editors=1100 I want to add some floating animations on each hexagon. The problem: I have some transform and scale on each path individually and, if i use the following CSS code, each individual hexagon, will be moved to the

path

path

coordinates.

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

I tried multiple things, like adding the style animation to the

tag. Anyone has any idea how can i achieve this? Unfortunately, i need to do this using only html and css.

Ionut Sanda

CodePen

ZEPjXKp

...

9 Replies

dys 🐙•2y ago

If you do the translation in CSS, does it make a difference? Maybe using the translate property rather than transform: translate()?

KillandCryOP•2y ago

it only works for the hexagons which have a different coordinate... any other ideas? :S

Darryll•2y ago

You can add each hexagon seperately as their own SVG and then just style the fill, position and inset of each one If they are all moving indepedently then you don't need to have them in 1 svg Otherwise, what's your @keyframes float look like?

KillandCryOP•2y ago

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(20px); } 100% { transform: translateY(0px); } }

Darryll•2y ago

Ah ok I see, so the issue is that in the path it's using transform="translate(900,600) scale(0.3)" on each shape so they are overwriting each other. To clean everything up I would probably seperate each svg into a repeating .hexagon component you can control freely with CSS (You can also clean your CSS up quite a bit to stop the repeating, for example: https://www.30secondsofcode.org/css/s/staggered-animation/ ) To keep it inside 1 svg you need to stop using transform as an attribute and instead position and scale them properly instead of adding it at the end. (Or less ideally add a g around every element and put the ids on there but that's a bit hacky)

KillandCryOP•2y ago

yea, i started to recalculate the coordinates on each hexagon. Figured it's faster this way than trying to figure out how to do it with transform/translate/positions etc

Darryll•2y ago

Yeah you want to avoid creating a situation where you have to maintain a seperate animation for every element It's possible, just not best practice

KillandCryOP•2y ago

yes, but, why i'm trying to do this, is because i want each element to have it's individual "float" efect and not float at the same time

Darryll•2y ago

That you an do via the link I sent, it has an example of staggering animation timing using a variable you could even set up the duration as a variable too so you can have different timings and different durations Then it all goes on 1 class and you just input your variables inline

Gaming

Programming

Animation on svg icons

Did you find this page helpful?