Jump to content
GreenSock

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

Sticky cursor animation

Recommended Posts

Hey,

I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please?

Link to post
Share on other sites

Hey sIREN and welcome to the GreenSock forums! There are existing threads than can show you how this is made such as 

and

Also this Codrops tutorial.

Link to post
Share on other sites

Thank you very much but I already have seen those. I think it's a bit more difficult to make the cursor be border/corsshair/marker (don't know how this looks like) or at least it is for me and I hoped if someone had any idea especially for this.

Link to post
Share on other sites
35 minutes ago, sIREN said:

I think it's a bit more difficult to make the cursor be border/corsshair/marker (don't know how this looks like) or at least it is for me and I hoped if someone had any idea especially for this.

I'd likely use an image. You just have to replace the circle with the image that you want to use.

Link to post
Share on other sites

I've modified a little bit the code but I have no idea where to put the image for the cursor or how. Can you help me ?

See the Pen bGVEgde by sIRENGR (@sIRENGR) on CodePen

Link to post
Share on other sites
4 minutes ago, sIREN said:

I have no idea where to put the image for the cursor or how. Can you help me ?

Using that approach, you'd need to switch out the rectangle with a canvas image. Since you're using Paper.js you could look into using their implementation: http://paperjs.org/tutorials/images/working-with-rasters/

 

I highly recommend first doing a basic canvas tutorial if you haven't used it before. The one on Mozilla is solid.

Link to post
Share on other sites

Welcome to the forum, I think there might be plenty of easier solutions, how about using:

 

• SVG

• Simple 1-bit PNG image (scaleable)

• CSS Background Image sprite with simple 1-bit PNG image (scaleable) 4 positions

• CSS Border Image with simple 1-bit PNG image (scaleable)

• CSS Border Image with inline SVG

• Use a single div then use 4 pseudo elements for corners

• Structure 5 divs, 4 divs inside div container

• etc., 

 

¯\_(ツ)_/¯

Link to post
Share on other sites

This one with the pseudo elements it could be very good but if you see the video that  I send at start it's a cursor with opacity 0 and when hovering it becomes a border

Link to post
Share on other sites
4 minutes ago, Shrug ¯\_(ツ)_/¯ said:

• Simple 1-bit PNG image (scaleable)

• CSS Background Image sprite with simple 1-bit PNG image (scaleable) 4 positions

• CSS Border Image with simple 1-bit PNG image (scaleable)

I'm curious, how would using a 1-bit PNG would be more helpful than any other PNG? 

 

Using 4 images whether it's in the border or not is a fine idea.

 

8 minutes ago, Shrug ¯\_(ツ)_/¯ said:

• Use a single div then use 4 pseudo elements for corners

You can't have 4 pseudo-elements on one div. 

  • Like 1
Link to post
Share on other sites

We are getting close. Thank you I'll play with it and I'll tell you tomorrow!

Link to post
Share on other sites
1 hour ago, ZachSaucier said:

I'm curious, how would using a 1-bit PNG would be more helpful than any other PNG? 

IMHO 1-bit scales nicely, but of course use whatever one likes.

 

1 hour ago, ZachSaucier said:

You can't have 4 pseudo-elements on one div. 

Tis true, I mistyped and misread when making that list of possible simpler approaches, thanks for catching that. Technically though you can use multiple pseudo elements on the same element but not multiple instances of ::before & ::after, but plenty of others.

 

I guess you could go down the rabbit hole if ya wanted and style it up.

.div:before, .div:after, .div>:first-child:before, .div>:first-child:after {

 

Link to post
Share on other sites
3 hours ago, sIREN said:

You can check his site out if it helps https://jmswrnr.com/

 

You can inspect the cursor to get an idea of what they did. It's made up of 4 different elements, and they are animating their position and border radius.

 

image.png.bfe2fa3b9705a2bc413eabb9f22a9dca.png

 

 

  • Like 2
Link to post
Share on other sites

Yes I've inspected it before but I couldn't understard or find any logic

 

Link to post
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.

×