DanyyPoch Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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. 2 Link to comment Share on other sites More sharing options...
DanyyPoch Posted August 28, 2021 Author Share Posted August 28, 2021 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? Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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 1 Link to comment Share on other sites More sharing options...
DanyyPoch Posted August 28, 2021 Author Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
DanyyPoch Posted August 28, 2021 Author Share Posted August 28, 2021 5 hours ago, Cassie said: Yep. Why don't you give it a go? We're here and happy to help if you get stuck on something GSAP-specific. Is it possibile to center text and set in right size See the Pen VwWvWVQ by danypoch (@danypoch) on CodePen Why cursor is scaling become pixeled? Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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/ 3 Link to comment Share on other sites More sharing options...
DanyyPoch Posted August 28, 2021 Author Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 29, 2021 Share Posted August 29, 2021 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. 1 Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 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 More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 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); 2 Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 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 More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 You should probably get rid of the pointer events on the cursor. See the Pen KKqdBYK by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 38 minutes ago, OSUblake said: You should probably get rid of the pointer events on the cursor. Thank you, why when I try to scroll down the cursor don't follow my pc cursor. My website test: https://danyylpochtar.it/ Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 Look at how I change the position to fixed in my demo. Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 37 minutes ago, OSUblake said: Look at how I change the position to fixed in my demo. Sorry but I have same issue Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2021 Share Posted September 1, 2021 You don't have position: fixed; on your cursor stuff. Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 9 minutes ago, OSUblake said: You don't have position: fixed; on your cursor stuff. Yes, I have Link to comment Share on other sites More sharing options...
akapowl Posted September 1, 2021 Share Posted September 1, 2021 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. 1 Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 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 More sharing options...
akapowl Posted September 1, 2021 Share Posted September 1, 2021 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. Link to comment Share on other sites More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 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 More sharing options...
akapowl Posted September 1, 2021 Share Posted September 1, 2021 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 More sharing options...
DanyyPoch Posted September 1, 2021 Author Share Posted September 1, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now