heyitsA

Hey @ZachSaucier I wrote it here because these were two different examples. The other one has a "magnetic area" and this one's area is the whole section. But maybe it's as you say it's better to gather both on one function and determine if there is an explicit magnetic area take that and if not, the previous container. Sorry if it was an inconvenience.

Thanks, @OSUblake. Trying to do one more thing. I am relatively new to js so don't know how to achieve the next codepen. https://codepen.io/esadrian/pen/KKMmVOW?editors=0010 I know the logic must be something like substract the scrollTop and calculate elements width and height and the relative position of the mouse, but I don't know how to fit it with your demo. var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var boundingRect = jsF.getBoundingClientRect(); var halfDiff = Math.abs(boundingRect.width - boundingRect.height) / 2; var relX = e.pageX - boundingRect.left - halfDiff; var relY = e.pageY - boundingRect.top; x: (relX - boundingRect.width / 2), y: (relY - boundingRect.height / 2 - scrollTop), Also, is the timer being used in your previous demo? var timer = gsap.delayedCall(5, () => { showAnimation.reverse(); }).pause();

Hey @ZachSaucier I'm back with this topic trying to make it with the .quickSetter() with the help of other demos but I don't know how to achieve it. In my particular example, where do I put the setters if I don't use tweens? gsap.to(wrap.mContent, { x: (relX - boundingRect.width / 2) * movement, y: (relY - boundingRect.height / 2 - scrollTop) * movement, ease: "power1", duration: 0.6 }); var xSet = gsap.quickSetter(wrap.mContent, "x", "px"); var ySet = gsap.quickSetter(wrap.mContent, "y", "px");

Thanks for the response, Zach. I gathered every toggle in a new function and called it onEnter and onLeaveBack. I was also missing .classList on the toggle and got wrong onEnter: () => function() { instead of onEnter: () => {. I did read the docs before posting, but my understanding was not that great with the example shown . At least I finally got it right! haha https://codepen.io/esadrian/pen/RwRavdd

Hi! Few questions: 1) What if I want to add different classes to each target? for example set .leave to .box1 and .active to .box2 and .hide to .box3 2) If I want the toggled class to stay on scrolled pass the trigger, I've read that is what onEnter, onLeave, onEnterBack, onLeaveBack is for and not the toggleClass, but don't know how to use it. 3) Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes? I had this made with ScrollMagic but want to switch to GSAP's ScrollTriger. This is where I'm at https://codepen.io/esadrian/pen/XWKdxZR

I mean the center of the content (the ball) same position as the cursor.

thanks @ZachSaucier. It's been a good 4 hours trying every possibility I was feeling helpless, I am so bad at JS. You posting the solution in 5 mins is mindblowing. Now that I have you here: how would you make to make the button magnetic but on the red area only? Probably a totally different function there, but how...

Hi @Carl @Sahil. I used something similar that the third post. I am trying now to get rid of jQuery but my knowledge is very limited. I want to use vanilla JS and have more than a single button (two) use the same magnetic function. To achieve this correctly, I have to find the magnetic area and magnetic content inside the magnetic wrap I am currently hovering, which I don't know how to do correctly in vanilla JS. (See second example). This example works fine on vanilla JS. https://codepen.io/esadrian/pen/xxVvbRN?editors=0010 Second example with two buttons on vanilla JS (NOT WORKING) https://codepen.io/esadrian/pen/YzyrJbO?editors=0010 Second example with two buttons on jQuery (Working bad: after too many hovers on the element, the magnetic duration seems instant.) https://codepen.io/esadrian/pen/PoPKGZJ?editors=0010

thanks @ZachSaucier I was getting crazy trying to figure out the error haha

Hello! I was exactly looking for this, but it gives me a weird flickering bug on chrome. Is it outdated? Here is the video: https://streamable.com/erd5tz

Hey @OSUblake, I like the idea, but I've tried selecting the heading and it acts very weirdly even if I put pointer-events: none; to .ball. Also: how would you make the ball visible only when the mouse if on the viewport? Seeing it visible on the window border is not really appealing. And what would happen in mobile devices, is it better to completely remove it?