Jump to content
Search Community

Modification of OsuBlake's Bezier Connector

Robert May test
Moderator Tag

Warning: Please note

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. 

Recommended Posts

Trying to modify osublake's

See the Pen GMrExO by osublake (@osublake) on CodePen

pen to put draggable circles and line inside of a very large external svg file. I can't duplicate this on CodePen for some reason but on my computer, when I drag the circles, the line follows but it leaves a huge gap between the circles and the line.

 

I've tried everything I can think of, any help would be greatly appreciated. Thanks!

See the Pen rpQLMB?editors=1010 by RobertMay (@RobertMay) on CodePen

Link to comment
Share on other sites

Solved the issue with:

 

var path = document.querySelector(".path");
var redDotXPos = redDot.getBBox().x + redDot.getBBox().width/2;
var redDotYPos = redDot.getBBox().y + redDot.getBBox().height/2;
var blueDotXPos = blueDot.getBBox().x + blueDot.getBBox().width/2;
var blueDotYPos = blueDot.getBBox().y + blueDot.getBBox().height/2;
TweenLite.set(path, { x:redDotXPos , y:redDotYPos});

 

Great product, great forum.... thanks for all you do!

  • Like 1
Link to comment
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.
×
×
  • Create New...