Jump to content
Search Community

CodePen Home Cuberto Cursor

DanyyPoch test
Moderator Tag

Recommended Posts

Hello everyone, I'm newbie in Gsap. I read that this codepen help to add text on cursor when hover on element but I can't understand how to implement in web site with only HTML and CSS. If you know better way to do the effect or if you know how to implement it can you help me ?

Thank for your time

 

See the Pen bGBJGpY by Jase2018 (@Jase2018) on CodePen

Link to comment
Share on other sites

Hey there Danyy.

 

There are 16 THOUSAND lines of code (JS alone) in that demo.

We absolutely do not have the capacity to look through this and help you implement this effect.

If you need help please create a minimal demo explaining your GSAP specific problem.

By minimal I mean *the bare minimum number of lines of code necessary to show the issue* depending on complexity I would expect less than 50 lines of JS.

  • Like 2
Link to comment
Share on other sites

2 minutes ago, Cassie said:

Hey there Danyy.

 

There are 16 THOUSAND lines of code (JS alone) in that demo.

We absolutely do not have the capacity to look through this and help you implement this effect.

If you need help please create a minimal demo explaining your GSAP specific problem.

By minimal I mean *the bare minimum number of lines of code necessary to show the issue* depending on complexity I would expect less than 50 lines of JS.

I riformulate my question, is it possible to have a text when over on element like on screen?effect.thumb.png.e90ec11da8d78bf14c73efab50c07dd4.png

Link to comment
Share on other sites

Yes, it's possible - It will require some learning though.

You'll need to create a div or similar with the content in - hide it by default and then show it when the mouse hovers over that element. That's fairly straightforward.

GSAP wise that would be -

gsap.to('.elem', {autoAlpha: 1})



If you need to follow the cursor that's going to be tricker but this will set you in the right direction.

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

  • Like 1
Link to comment
Share on other sites

11 minutes ago, Cassie said:

Yes, it's possible - It will require some learning though.

You'll need to create a div or similar with the content in - hide it by default and then show it when the mouse hovers over that element. That's fairly straightforward.

GSAP wise that would be -

gsap.to('.elem', {autoAlpha: 1})



If you need to follow the cursor that's going to be tricker but this will set you in the right direction.
 

 

It is possibile to add text ?

Link to comment
Share on other sites

Yep.
 

13 minutes ago, Cassie said:

You'll need to create a div or similar with the content in - hide it by default and then show it when the mouse hovers over that element. That's fairly straightforward.


Why don't you give it a go? We're here and happy to help if you get stuck on something GSAP-specific.

Link to comment
Share on other sites

This looks great! Much better.

So - you're starting off with a font size that's a fraction of a rem and a circle that's a few pixels wide and then scaling it.

You're also not centering the text in the cursor. If you do it the other way round you'll have a better result!

 Set your initial state like this and then shrink it down. ☺️


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



p.s. 
 

I also noticed that you're using deprecated syntax. Check out the migration guide.

https://greensock.com/3-migration/

  • Like 3
Link to comment
Share on other sites

5 hours ago, Cassie said:

This looks great! Much better.

So - you're starting off with a font size that's a fraction of a rem and a circle that's a few pixels wide and then scaling it.

You're also not centering the text in the cursor. If you do it the other way round you'll have a better result!

 Set your initial state like this and then shrink it down. ☺️

 

 


p.s. 
 

 

 

I also noticed that you're using deprecated syntax. Check out the migration guide.

https://greensock.com/3-migration/

So when I hover on object my cursor become smaller ?

Link to comment
Share on other sites

No, you don't have to change what your animation does. I just mean, set your initial styles in CSS so the styles are correct - then adjust them for the animation.

Here - 

See the Pen KKqdBYK?editors=0110 by GreenSock (@GreenSock) on CodePen



sidenote. You're currently mixing up CSS transforms and transitions and GSAP. This is an easy way to get conflicts, better to clear all transitions and transforms out of your CSS and do everything with GSAP. I've shown how you can do a scale tween instead of toggling classes.

  • Like 1
Link to comment
Share on other sites

On 8/29/2021 at 1:29 PM, Cassie said:

Sorry but I don't understand how now I can hide text when cursor is small and how to show when is big on object and why follower and cursor are shifted and why the cursor is not in first layer(z-index:99 doesn't work)

 

No, you don't have to change what your animation does. I just mean, set your initial styles in CSS so the styles are correct - then adjust them for the animation.

Here - 
 

 


sidenote. You're currently mixing up CSS transforms and transitions and GSAP. This is an easy way to get conflicts, better to clear all transitions and transforms out of your CSS and do everything with GSAP. I've shown how you can do a scale tween instead of toggling classes.

 

 

 

Link to comment
Share on other sites

21 minutes ago, OSUblake said:

You can use a timeline to change the opacity of the text.

 

let scale = gsap.timeline({ paused: true })
  .to(".cursor", {
    scale: 2,
    transformOrigin: 'center',
  })
  .to(".cursor .piu", {
    opacity: 1
  }, 0);

Thank you, do you know why cursor bug when I set cursor z-index:1?

 

Link to comment
Share on other sites

Looks like you are using locomotive-scroll there. 

 

If in your markup your cursor is inside of the container that locomotive-scroll uses for the translation of the content (i.e. the smooth scroll effect), position: fixed won't work as in a native environment, as the transforms on that container will change the context for the fixed position - yo you'd need to take the cursor elements out of that container for position: fixed to work.

 

Another thing could be that instead of pageX and pageY you might consider using clientX and clientY.

 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

 

But it is very tough to diagnose a live website and it's a bit out of scope for the support in these forums.

  • Like 1
Link to comment
Share on other sites

12 minutes ago, akapowl said:

Looks like you are using locomotive-scroll there. 

 

If in your markup your cursor is inside of the container that locomotive-scroll uses for the translation of the content (i.e. the smooth scroll effect), position: fixed won't work as in a native environment, as the transforms on that container will change the context for the fixed position - yo you'd need to take the cursor elements out of that container for position: fixed to work.

 

Another thing could be that instead of pageX and pageY you might consider using clientX and clientY.

 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

 

But it is very tough to diagnose a live website and it's a bit out of scope for the support in these forums.

Ok I put it outside but now the animation doesn't start

Link to comment
Share on other sites

6 minutes ago, akapowl said:

You have the mouseenter and mouseleave set for a '.portfolio-item img' but I don't see any .portfolio-item on the page you linked to.

So my best guess would be you'll need to adjust your selectors there.

Other animation doesn't work like last 3 photos

Link to comment
Share on other sites

It appears that you don't have a scroller set for your ScrollTriggers, which you'll need for them to work with locomotive scroll.

 

I think it might have worked before, as the body is the default that is being used as the scroller by ScrollTrigger, but now that you have changed the scroller to a different container, you will have to specify that container as the scrolller in your STs.

Link to comment
Share on other sites

27 minutes ago, akapowl said:

It appears that you don't have a scroller set for your ScrollTriggers, which you'll need for them to work with locomotive scroll.

 

I think it might have worked before, as the body is the default that is being used as the scroller by ScrollTrigger, but now that you have changed the scroller to a different container, you will have to specify that container as the scrolller in your STs.

I don't understand, can you give me an example ?(Solved)

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