isengart Posted June 2, 2020 Share Posted June 2, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 2, 2020 Share Posted June 2, 2020 Hey isengart and welcome to the GreenSock forums and to the world of GSAP! We think you're going to love it. I think I would approach this situation differently. It's much easier to conceptually move an element horizontally and vertically than it is to move it diagonally (though you can move it diagonally if you try hard enough). As such, I recommend that you actually create your stars as horizontal or vertical lines and use rotation in JS to get the rotation that you desire. For example, here's a basic way to do it using an HTML element: See the Pen jOWOrqq?editors=0010 by GreenSock (@GreenSock) on CodePen Some other notes: You don't need jQuery to select elements, you can just pass in the selector string and GSAP will select the element(s) for you. In GSAP 3 it's best to put the duration in the vars parameter. You can use xPercent and yPercent if you want to animate relative to the size of the element. You don't need quotes around numerical values unless you need to add a unit. You can used the condensed form for eases that are new in GSAP 3. For example "power3.in". I hope that helps! Let us know what other questions you have. 6 Link to comment Share on other sites More sharing options...
isengart Posted June 2, 2020 Author Share Posted June 2, 2020 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! 1 Link to comment Share on other sites More sharing options...
isengart Posted June 3, 2020 Author Share Posted June 3, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 3, 2020 Share Posted June 3, 2020 Nice work! I don't know much about Gatsby. @OSUblake and @Rodrigo tend to answer the React questions. You might be interested in submitting to the CodePen Challenge Competition that's going on right now Also you may enjoy using ScrollTrigger: 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 3, 2020 Share Posted June 3, 2020 To speed stuff up, you can keep stuff out your main bundle, like with a lazy component. https://reactjs.org/docs/code-splitting.html#reactlazy But I don't know if that will work with Gatsby. Might need to look at loadable components. https://github.com/gregberge/loadable-components 4 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 3, 2020 Share Posted June 3, 2020 Another option is split your SVG into several components. With that approach you could use pure components in order to prevent unnecessary re-renders or add the componentShouldUpdate method into a class component in order to re-render only those that are needed. I remember a similar case with an insanely large SVG file on several components. First I created a JSON file with all the complex paths in them (actually the d attribute of those paths). Then I splited the component into several others and in most of them I used componentShouldUpdate and return false always, since I didn't need any of the child components, except two, to be re-rendered more than once during their life-time. Here is a very rough example of that: https://codesandbox.io/s/child-component-render-7rt2p Think of <MainParent /> as your main <svg> container and <ChildComponent /> as one of many child components holding different parts of your SVG markup that don't need to be re-rendered. Here you can read more about pure component and componentShouldUpdate: https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-component.html#shouldcomponentupdate Happy Tweening!!! PS: Cool animation on the menu BTW and great job with the SVG landscapes!!! 4 Link to comment Share on other sites More sharing options...
isengart Posted June 3, 2020 Author Share Posted June 3, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now