isengart

Wow I never thought about adding parts of the svg as component, I will try do that ! Btw menu is an insane React component https://github.com/negomi/react-burger-menu Thanks for the help guys!

Hello again ! Took me some time but I made some basic animations and it was fun af! https://build-66d932c2-715f-41ba-8aaf-c741957bc672.gtsb.io/ Although I got an extra question. I implemented the animation in a React/Gatsby project. As I cant add ids to the svg elements that I want to animate and I need to use refs cause of React ( or is another way that I missed? ) I had to add the whole SVG element inside the component. This is the whole component of the 2nd animation: https://github.com/isengartz/gatsby-portfolio/blob/master/src/components/layout/SvgFooter/SvgFooter.js Gatsby Cloud returns a lighthouse report after each build so I saw that it gives an error about "Largest Contentful Paint" ( https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbuild-66d932c2-715f-41ba-8aaf-c741957bc672.gtsb.io%2F&hl=en&tab=mobile ) which I guess comes from the 1300 lines of svg element. So my question is if there is a way to somehow get rid of that error by importing the svg instead ( I couldnt think of a way to do so cause of the refs ) or another more proper way to implement gsap with react. Thanks in advance!

Wow this is actually very helpful ! I will try to edit the SVG and apply the rotation through gsap! Thanks alot for the extra information!

Hello, completly new to GSAP. I was experimenting with an SVG after I managed to animate everything I got stuck on the "star" where I had to move it diagonally. The way it moves now is way way akward. My mindset is getting the star outside the viewbox of svg and give it a random X start position then move it diagonally outside of viewbox again and put this in a loop. Although I cant make the diagonally animation look smooth at all. I read some other examples like this : but seriously I couldnt find out how it works!