Jump to content
GreenSock

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

Moving element on scroll to another elements coordinate

Go to solution Solved by OSUblake,

Recommended Posts

Hello ,

 

Can anyone please help me, I want to design a webpage like attached below,  i want to move the star "1" to the position of other stars on scroll.

 

 1843436555_ScreenShot2021-09-07at11_18_10AM.thumb.png.c5c5391efb2fd43e1bb9156f3323a198.png 

 

Thanks 

Link to comment
Share on other sites

Absolutely - that's the perfect job for ScrollTrigger. I'd recommend reading the docs and giving it a shot. If you get stuck post a minimal demo here and we'd be happy to offer advice. You also might want to check out the ScrollTrigger Demos - there are a lot that might inspire you. Your image made me think of this one a bit: 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Thanks for this i will  have to create a svg path for this  , so instead of that i have created timeline , but i want to stop timeline after it reaches to the 2nd star and start another time line , it is possible to achieve same ?

  

Link to comment
Share on other sites

I'm not sure I understand exactly what you're asking here, but in general yes you can absolutely stop a timeline and start another timeline whenever you want. GSAP offers a ton of controls like pause(), play(), etc. If you still need some help, I would recommend providing a minimal demo so we can see the issue in context. 

Link to comment
Share on other sites

Hi

I want to move the first element through each green box and stop exactly at the position of the last green box

please check the code pen demo for example

See the Pen ExXGEMJ by gaurav501 (@gaurav501) on CodePen

 

Link to comment
Share on other sites

I'd probably suggest using SVG and a motion path - like so.

edit - (sorry for the duplicate - didn't see this was already linked to)

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

but how will i create a svg path with the specific coordinates ? is there any way to apply positions( left ,top) instead of transform property for motion path triggering element ?

Link to comment
Share on other sites

Check out the docs. You can provide your own coordinates.

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

// plot a curve through these coordinates. The target's current coordinates will automatically be added to the start:
motionPath: [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]

// cubic bezier coordinates (anchor, two control points, anchor, two control points, etc.):
motionPath: {
  path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
  type: "cubic"
}

 

Or you can manipulate the path data string if you understand path commands.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

 

 

  • Like 1
Link to comment
Share on other sites

8 hours ago, OSUblake said:

Check out the docs. You can provide your own coordinates.

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

// plot a curve through these coordinates. The target's current coordinates will automatically be added to the start:
motionPath: [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]

// cubic bezier coordinates (anchor, two control points, anchor, two control points, etc.):
motionPath: {
  path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
  type: "cubic"
}

 

Or you can manipulate the path data string if you understand path commands.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

 

 

Hi @OSUblake i have done the same thing , please check my codepen

 

See the Pen ExXGEMJ by gaurav501 (@gaurav501) on CodePen

 

I want to move the first element through each green box and stop exactly at the position of the last green box

Link to comment
Share on other sites

  • Solution

You're not calculating those positions correctly.

 

See the Pen OJgdaxV by GreenSock (@GreenSock) on CodePen

 

  • Like 2
  • Thanks 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.

×