en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en nl nl en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en lt en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en lt en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en it en nl en de en en en fr en es en de en en en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
I'm new to GSAP. I have done a few tutorials on Tweenmax and I have basic understanding of GSAP. However, I am struggling with GSAP integration with VisJs library.
Current tool: To draw Bezier curves between the nodes I am using VisJs library. The library is using quadraticCurveTo method to draw lines between nodes.
Is it possible to achieve the goal using GSAP while integrating it with third party libraries?
What would be the best way to achieve the goal? My assumption was to use Bezier and DrawSVG plugins.
Is there anything else I should know?
I have zero experience with VisJS (never heard of it but again, there are so many JS libraries nowadays that no one will know them all - it will be the next Pokemon expansion set by the looks of it "Pokemon JS, Gotta Learn them All").
It is possible to integrate GSAP with pretty much anything that's a JavaScript object and tween its values. I can't give you any snippets or show any examples that are related to VisJS, maybe if you can set a little reduced case scenario other people can jump in with their thoughts.
I had a look at the link you sent but I am a bit confused as the link takes me to a visualisation that already is animating. Plus, it's a canvas element, not a SVG one so, DrawSVG won't be able to help you much unless your canvas is referencing SVG elements.
Ideally is best to provide a demo in CodePen or JSFiddle or some other online editor so we can focus on just the relevant code in your case, there's the whole rest of the site that makes it take a lot longer to identify what is relevant and what is not.
Share on other sites
Carl    10,905 Likes (Superhero)
Posted December 6, 2016
I don't have much to add to what Dipscom said.
GSAP can animate any value so you can animate the CSS rotation of a DOM element almost the same way you would rotate a camera in a 3D three.js WebGL world.
It sounds totally plausible that you would be able to animate the coordinates of visjs objects and render lines between them.
The demos below aren't exact solutions to what you are doing but might serve as inspiration or perhaps proof of what is possible when you animate a few values
Share on other sites
ARAS    1 Likes (Newbie)
Posted December 6, 2016
Thanks for quick response and apologies for the confusion. Here is the CodePen link for specific example I'm trying to animate
See the Pen Wozmxj by anon (@anon) on CodePen
So, at the moment I have all the edges between nodes visualised and some animation is in place. However I would like to draw edges in sequence (using a timeline) and process of drawing should be similar to what was visualised here
See the Pen zLiux by GreenSock (@GreenSock) on CodePen
. I am still trying to work out how VisJs works and I was sure that it is drawing SVG elements but I might be wrong.
Share on other sites
Dipscom    3,362 Likes (Superhero)
Posted December 6, 2016
Thanks for the Pen, it helps and does make a bit more sense now.
The bad news is that VisJS is not drawing an SVG shape, at least not in the example you have provided. It's drawing shapes in canvas and from a quick glance VisJS does not offer ways to animate the actual connections between the nodes.
I'm afraid this is more of a question to the VisJS forums rather than the GSAP, as I said, I have no experience with it and can't really dedicate the time to learn that framework to see if I can come up with a way to do it.
If you can find out how the edges are being drawn, we surely can make GSAP animate the values. But so far, from what I can see, the edges are on a on/off value only. No option to animate the length of it.
Share on other sites
OSUblake    18,413 Likes (Superhero)
Posted December 7, 2016
I've shown how to draw lines in canvas like the DrawSVGPlugin, but it's for cubic data, not quadratic.
Share on other sites
ARAS    1 Likes (Newbie)
Posted December 8, 2016
That's awesome. Thanks for help!
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Animating SVG Edges between Nodes using VisJs and GSAP.
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“I think I love GreenSock as much as bacon.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“Really quite impressed with @GreenSock JS - even the small things.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.