Kevin Powell - Community•2w 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•2w ago

Does it not even run the animation once?

Zax71•2w 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•2w 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•2w 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•2w ago

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

Zax71•2w ago

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

Jochem•2w 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

Zax71•2w 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•2w ago

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

Jochem•2w ago

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

b1mind•2w ago

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

Chris Bolson•2w 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•2w ago

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

Chris Bolson•2w ago

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

b1mind•2w 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)

Zax71•2w ago

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

Chris Bolson•2w 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
}

Zax71•2w ago

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

Chris Bolson•2w ago

that removes the class from the circles

Zax71•2w ago

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

Chris Bolson•2w ago

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

Zax71•2w ago

Good point, yeah. This is for a hamburger menu

b1mind•2w ago

I would honestly use Sveltes animations maybe at that point

Zax71•2w ago

til!

b1mind•2w ago

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

Zax71•2w ago

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

b1mind•2w 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.

Zax71•2w ago

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

b1mind•2w ago

np you have options now!

Gaming

Programming

CSS animation not triggering