SikandarJODD / svelte-animations

Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion
https://animation-svelte.vercel.app
MIT License
642 stars 31 forks source link

Trigger Text Animations On Scroll #10

Closed miah0x41 closed 2 months ago

miah0x41 commented 3 months ago

Currently text animations such as the number ticker 1 are triggered on page load. Much like other animations such as BlurFade, have the option to be triggered by scrolling into view.

It would appear a similar implementation exists for React based on your Thank You list [2]

[2] https://ui.indie-starter.dev/docs/text-animation#letters-pull-up

Edit: added additional reference.

SikandarJODD commented 3 months ago

yeep i will try to add in-view for components good idea

miah0x41 commented 3 months ago

Much appreciated, thanks for your hard work!

SikandarJODD commented 2 months ago

Solved : Added refresh button image

well i added 2 more components from Magic UI

  1. Flickering Grid : https://animation-svelte.vercel.app/magic/flickering-grid
  2. Sparkles Text : https://animation-svelte.vercel.app/magic/sparkles-text
SikandarJODD commented 2 months ago

sorry i know it took lot of time..for such small change

miah0x41 commented 2 months ago

Please do not apologise, we appreciate your unpaid labour.

I realised that my original request wasn't very clear or perhaps I haven't understood the change you made.

What I was after, when I use the component (the Number Ticker) it should start counting when it comes into view on a long page. I can't see the use of inView in the code.

I'll try it out to see if that's what happens.

Thanks.