Jump to content

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

Custom cursor with line trails

Go to solution Solved by OSUblake,

Recommended Posts

Hello everyone! I've been a lurker over here for a long time and I think this time is my turn to ask for a little bit of help.


I got a project where I'm building a custom cursor very similar to the one showing on the attached pen by Blake Bowen  I'm trying to implement this on a project using React but I'm having a bit of trouble understanding how the modifier plugin is working, so far I was able to get the custom cursor going however no curves are getting formed. I did build a demo for you guys and gals to take a look over here https://codesandbox.io/s/epic-hofstadter-1405v?file=/src/App.js 


Apologies if maybe this is the type of question that should be avoided.


Thanks :)

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

Link to comment
Share on other sites

  • Solution

Hi raund,


I didn't do a deep dive into your code, but I noticed that you are passing the same leader to every line. The way I set that demo up made more sense in GSAP prior to version 3 as the leader object is the old _gsTransform object except for the first one, which is the just a simple object with x and y properties.


Notice in the loop how the leader changes. The createLine function is returning the _gsTransform object for that line, so the next createLine call will pass in the previous line's _gsTransform object.

for (var i = 0; i < total; i++) {
  leader = createLine(leader, i);


In v3, _gsTransform has been replaced with gsap.getProperty, so we need to make a few adjustments. Now the leader is what gsap.getProperty(line) returns. That will work fine with all the lines except for the first one, so I made the initial leader object a function so that it will use a similar syntax to getProperty.


let leader = (prop) => {
  return prop === "x" ? pointer.x : pointer.y;


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


Now about implementing that in React - I probably wouldn't make the lines their own component. I would try to make the entire animation a single component. I would also avoid using setState for the position as it's unnecessary for the animation, and just slows React down.


  • Like 4
Link to comment
Share on other sites

Hi! Thank you very much for your answer, it's working now thanks to your help :) 

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