[ZacmienieKsiezyca]

#svg #animacja #html #css #webdev

Próbuje stworzyć animowane SVG trochę już o tym poczytałam ale nic co znajduję nie przybliża mnie do odkrycia w jaki sposób zrobić to co chcę. Docelowo chciałabym aby po najechaniu myszką ikona zmieniała się w napis.

Aby pozbyć się ikony z pierwszego planu próbowałam już paru rzeczy: morfowania (to wydaje się zbyt trudnym kształtem i nie działa za bardzo), zmiany koloru ikony na kolor tła (to też nie chce działać)

Dla zobrazowania tego efektu znalazłam tutorial: https://css-tricks.com/snippets/svg/shape-morphing-icons-button-click/ Niestety biblioteka z której tutaj korzystają jest płatna a ja nie umiem znaleźć żadnej darmowej alternatywy.

Ktoś może poradzić jak to ugryźć?

[kWeb24]

@ZacmienieKsiezyca: Spróbuj animejs

[ZacmienieKsiezyca]

@kWeb24: Już znalazłam jakieś rozwiązanie ale nie działa mi to za dobrze.

https://jsfiddle.net/Ksiezyc/xe9u4dao/16/

Może jesteś w stanie doradzić dlaczego tak się

[radziu_11]

@ZacmienieKsiezyca: do zabawy z animowaniem SVG polecam bibliotekę svg.js Sam morphing jest prosty jeżeli pamiętasz, że kształt przed zmianą i po zmianie musi mieć taką samą liczbę punktów (nodów)

[ZacmienieKsiezyca]

@kWeb24: @radziu_11: Jest jeszcze jakiś inny sposób na zamianę obrazka w tekst oprócz morfowania?

Nie działa mi to tak jak chcę.

[kWeb24]

@ZacmienieKsiezyca: SVG to najlepsza opcja, jeśli masz After Effecta spróbuj może tego https://github.com/airbnb/lottie-web

[ZacmienieKsiezyca]

@kWeb24: Dzięki : )