[Smooth diagonnaly move item]

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!

[Smooth diagonnaly move item]

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!

[Smooth diagonnaly move item]

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!

[Smooth diagonnaly move item]

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!

See the Pen dyGyMam by isengartz (@isengartz) on CodePen