Kevin Powell - Community•6mo ago

CSS animation not triggering

I have this animation and upon calling open() with another Svelte component, I can see the toggled-ring class getting added in devtools but it does not cause the animation to play. When I staticly add this class in code, it does play the animation correctly. How can I toggle this animation with JS?

29 Replies

Chris Bolson•6mo ago

Does it not even run the animation once?

Zax71OP•6mo ago

Nope, here is a svelte REPL if that is of help https://svelte.dev/repl/28dc7a6abbb04f17ac8169402895967e?version=4.2.18

Hello world • REPL • Svelte

Cybernetically enhanced web apps

Chris Bolson•6mo ago

I don't know much about Svelte but I must say that, from looking at your code, I do like the look of it. It basically looks so similar to JavaScript it seems familiar. I should really give this a go! It appears that, as the toggled-ring class isn't being included in the CSS. I presume that this is due to Svelte detecting that it isn't being used (in the HTML) so it saves space by not exporting it. I tried adding the "toggled-ring" to one of the circles and, on running the code, the class was now included and the animation ran on clicking the button. I may be well off with this but that certiainly lools like what is happening. If that is the case I presume there must be a way to "force" Svelte to include the class 🤔 ... a quick search has confirmed my suspicion - Svelte is not exporting unused classes

Jochem•6mo ago

you can wrap the selector in :global() iirc so :global{.toggled-ring) not 100% ideal, but it should force svelte to include the class regardless of it not being used anywhere

Chris Bolson•6mo ago

I literally just found that solution as you replied - thanks Jochem 👍

Zax71OP•6mo ago

Thanks so much! I'll look in to using that That was the issue! Thanks :D

Jochem•6mo ago

keep in mind that it negates scoped styling, so it'll apply to any element with toggle-ring on it. Don't overuse it, especially if you're not the only one writing code for the project

Zax71OP•6mo ago

Yeah, that is a downside. It is just me writing here so it should not be an issue but if another solution exists then I'll certainly swap it out

Chris Bolson•6mo ago

I get the idea behind not compiling unused classes but there should be a better solution that having to make it global.

Jochem•6mo ago

yeah, especially for a component framework. Toggling classes on and off is such a common thing

b1mind•6mo ago

https://svelte.dev/docs/element-directives#class-name You have the class: directive

Chris Bolson•6mo ago

A possible better way to do this would be. like this:

let animated = false;
    export function open() {
     animated = true
    }
    
</script>
<svg viewBox="0 0 100 100">
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 100%;  --color: #2E2A4C" />
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 90%;  --color: #BA4A64" />
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 80%;  --color: #E7734A" />
</svg>

let animated = false;
    export function open() {
     animated = true
    }
    
</script>
<svg viewBox="0 0 100 100">
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 100%;  --color: #2E2A4C" />
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 90%;  --color: #BA4A64" />
    <circle cx="100" cy="0" r="100" class="ring {animated ? 'toggled-ring': ''}" style="--scale: 80%;  --color: #E7734A" />
</svg>

That will include the class toggled-ring

b1mind•6mo ago

https://svelte.dev/repl/f1d8df9d7a34449fbb18af8019db3261?version=4.2.18

Chris Bolson•6mo ago

I do like the look of Svelte! - this is the first time I have ever looked at it beyond a quick read.

b1mind•6mo ago

Sveltes 🔥 mate you should give a college try People think I'm just full of it but the DX is hard to beat and getting better in Svetle5 imo I'm trying to find how they are changing :global() too cause it gets better in 5 They also changed on:event to actual event attributes onclick= which allows for better handling of events. (leveraging the platform 👏 ) oh so yea in Svelte5 how we can do global got cleaner

//old
:global(.class) {}
//new
:global {
  .class
}

//old
:global(.class) {}
//new
:global {
  .class
}

which I'm all for ❤️ (there are cases you need this escape hatch so really nice that its a cleaner way to nest them vs writing a :global() for each selector)

Zax71OP•6mo ago

Ah! I forgot about that. I'll implement that once I figure out how to play the animation multiple times

Chris Bolson•6mo ago

With the version that I posted a few minutes ago you can do this to toggle the animation:

let animated = false;
export function open() {
   animated = !animated
}

let animated = false;
export function open() {
   animated = !animated
}

Zax71OP•6mo ago

Except CSS doesn't like re-playing animations (Unless I am missing something there)

Chris Bolson•6mo ago

that removes the class from the circles

Zax71OP•6mo ago

Yeah, removing the class will not play it in reverse from what I have found

Chris Bolson•6mo ago

ah, you didn't mention that you want to play it in reverse, just to play it multiple times.

Zax71OP•6mo ago

Good point, yeah. This is for a hamburger menu

b1mind•6mo ago

I would honestly use Sveltes animations maybe at that point

Zax71OP•6mo ago

til!

b1mind•6mo ago

https://svelte.dev/examples/in-and-out You can make them custom this is just the example

Zax71OP•6mo ago

Ooh, that sounds like the clean way to do this...

b1mind•6mo ago

https://joyofcode.xyz/animation-with-svelte#custom-transitions Whats really 🔥 is you can use this method to tap into JS animation libraries too and use tick to progress a timeline lets say.

Zax71OP•6mo ago

Wow! I'll have to dig in to this. Thanks for pointing me in the right direction <3

b1mind•6mo ago

np you have options now!

Gaming

Programming

CSS animation not triggering