Jump to content
GreenSock

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

move a div drawing a stroke path alongside

Recommended Posts

Hi,

I am quite new in GSAP and I currently struggle at how to move the div drawing a stroke path alongside. I’ve tried a tons different method (include snap) but I didn't achieve my goal.
 
In the first example I’ve tried to copy x and y parameters which are use by the timeline “t1" in order to include them to timeline with “.divBox” (the div should move along the path). Unfortunately my method dosen’t work and I don’t know how to get x and y parameters from “t1” and use it as a value for ".divBox".
 
  1. See the Pen gmEbNv by gtruskowski (@gtruskowski) on CodePen

My second method is quite simple but the div isn’t responsive, even if I coordinate x and y (especially when I change the window size).
 
I know that the MorphSVG plugin can offer a better solution for this problem but I can’t use any commercial plugins in this project.
 
Many thanks for any help!

 

See the Pen oZVNWJ by gtruskowski (@gtruskowski) on CodePen

Link to comment
Share on other sites

Gregorio, 

 

Here is one approach to moving a div along a path.  

 

See the Pen XMGmeE by rfenik (@rfenik) on CodePen

  • Like 4
Link to comment
Share on other sites

I'd certainly use the approach ryanf is using in his demo.

 

You said "I can’t use any commercial plugins in this project." Did you mean because you're not a Club GreenSock member or you actually are not allowed to use them on the project? If it's the former, I'd recommend joining the Club so you can use the MorphSVG plugin. You'll save lots of time and membership pays for itself quickly. If it's the latter, that does put you in a tough spot. 

 

I'd suggest taking a look at the Bezier plugin:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Yeah, that's not a trivial task if you want just the path to scale to the page and be completely dynamic so that while things are animating, you could resize the window and everything would adjust accordingly. Very possible, but complex. 

 

Does it have to be a DIV? Could you just have everything inside an SVG? That'd certainly make it easier (though everything would scale together which may not be what you want). 

 

One option is to figure out the concatenated inverse matrix for the path and use the ModifiersPlugin to transform the x/y values on-the-fly. Again, not easy or simple, but doable with some math and wizardry. 

  • Like 3
Link to comment
Share on other sites

Thank you guys for any suggestions! 

The MorphSvg plugin is the great tool and probably you convince me to join to GSAP Club. I will try to use it in my project together with the ModifiersPlugin. 

As for a div inside an SVG, It could be inside the SVG because I want to use the same scale for the div, the path and the Fibonacci figure.

 

Up till now, I've found a solution for responsive of the div path but It does not satisfy me. It doesn't work smoothly and I haven't full control of the div by GSAP.

 

See the Pen zZbmGG by gtruskowski (@gtruskowski) on CodePen

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.
×