Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Smooth diagonnaly move item

Recommended Posts

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 post
Share on other sites

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.

  • Like 6
Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

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:



  • Like 1
Link to post
Share on other sites

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:



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:





Happy Tweening!!!


PS: Cool animation on the menu BTW and great job with the SVG landscapes!!!

  • Like 4
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.