there are good transitions/animations that svelte provides and I feel like it's also fitting for svelte to help me fire these animations at the right time svelte animations helped me a lot while creating my UI, but today I was gonna make a "Reveal elements on scroll" effect and I really believed that svelte will make this very easy for me, in the end, it already made the slide animation, I just need to fire it in the right time
well... I was surprised to find that svelte didn't give me any way of doing that so my first thought since I'm animating the first part of the website I'll let it fire onMount instead
here is where I got into the second issue svelte animations are very good at what they do, just not so good at controlling when to start, the docs tell me to wrap my component in an if statement, but that's not good because that just made the element hidden altogether until the website is mounted, animation works good but the element pops into place because it was hidden before it was mounted
and I quickly found out as you might have guessed that onMount approach wasn't a good idea because the sections under won't animate when scrolled to
My fix:
1- I had to go back to tailwind/css because it gave me more flexibility when to fire the animation using the Ternary conditional operator instead of wrapping the whole element with an if statement and I had to build the slide effect myself there and since it was css instead of making the element hidden, I just changed the opacity to 0 before it fires then to 100 while it animates so it doesn't just pop into place like how it used to
2- to make the Intersection Observer effect it was complicated enough and it will add a lot of code, so I imported a 3rd party package https://github.com/metonym/svelte-intersection-observer , still added some boilerplate but at least it works now.
Describe the proposed solution
1- give svelte animations a functionality similar to the Ternary conditional operator so we have more control over when to make it animate
2- Adding an on:View when an element is visible on the user's screen? if that's not possible maybe a bind:BoundingClientRectHeight={} to make making the functionality easier?
Alternatives considered
No response
Importance
would make my life easier
Additional Information
knowing when the element is in the user's screen is helpful for Front-End while I know it's not the framework's job, but since it already made the animations might as well make using them easier.
azezsan
commented
1 year ago
Describe the problem
there are good transitions/animations that svelte provides and I feel like it's also fitting for svelte to help me fire these animations at the right time svelte animations helped me a lot while creating my UI, but today I was gonna make a "Reveal elements on scroll" effect and I really believed that svelte will make this very easy for me, in the end, it already made the slide animation, I just need to fire it in the right time
well... I was surprised to find that svelte didn't give me any way of doing that so my first thought since I'm animating the first part of the website I'll let it fire onMount instead
here is where I got into the second issue svelte animations are very good at what they do, just not so good at controlling when to start, the docs tell me to wrap my component in an if statement, but that's not good because that just made the element hidden altogether until the website is mounted, animation works good but the element pops into place because it was hidden before it was mounted
and I quickly found out as you might have guessed that onMount approach wasn't a good idea because the sections under won't animate when scrolled to
My fix:
1- I had to go back to tailwind/css because it gave me more flexibility when to fire the animation using the Ternary conditional operator instead of wrapping the whole element with an if statement and I had to build the slide effect myself there and since it was css instead of making the element hidden, I just changed the opacity to 0 before it fires then to 100 while it animates so it doesn't just pop into place like how it used to
2- to make the Intersection Observer effect it was complicated enough and it will add a lot of code, so I imported a 3rd party package https://github.com/metonym/svelte-intersection-observer , still added some boilerplate but at least it works now.
Describe the proposed solution
1- give svelte animations a functionality similar to the Ternary conditional operator so we have more control over when to make it animate
2- Adding an on:View when an element is visible on the user's screen? if that's not possible maybe a bind:BoundingClientRectHeight={} to make making the functionality easier?
Alternatives considered
No response
Importance
would make my life easier
Additional Information
knowing when the element is in the user's screen is helpful for Front-End while I know it's not the framework's job, but since it already made the animations might as well make using them easier.