Jump to content
Search Community

Magnetic Button with GSAP

dhaliwallambi test
Moderator Tag

Recommended Posts

Hello Guys,

 

I found this codepen, I wanna use this effect on the links in my portfolio but the problem is I don't want my link to be enclosed further in an element. I don't want to create an extra div enclosing my link like this codepen has.

 

I don't want this:

<div class="container">
  <div class="circle"> Hover</div>
</div>

 

I want this:
  <div class="circle"> Hover</div>

 

Regards,

 

 

Codepen: 

See the Pen pobRYqj by SahiljeetSingh (@SahiljeetSingh) on CodePen

Link to comment
Share on other sites

I prefer that it is impossible. The essence of this effect is that when you point at the 1st block you influence the motion of the 2nd element, which is inside. If you only set the animation to text, it will work very crookedly. This effect needs space, about 100x100 px - 150x150px, etc.

  • Like 1
Link to comment
Share on other sites

Hey dhaliwallambi. As Olga said, the container is pretty important because if you leave it out you'll need to apply the hover listener to whatever the container of the element is and then increase the complexity of the calculations to keep the effect limited to the original range. 

 

If you're trying to reduce markup, you could generate the container via JavaScript if you'd like.

 

Whatever you decide, we highly recommend upgrading to GSAP 3 so you can make use of the smaller file size, the sleeker API, and the many new features:

 

Link to comment
Share on other sites

Hi @dhaliwallambi,

 

There's a few things you can do, and here is one of them. Use JS (in this case jQuery since you're already using it) to wrap the element in a container. Along with that, you'll want to do a few other things, namely these:

 

Remove the function 

callParallax(e)

Because it's not really doing anything you can't pass directly to

parallaxIt(e, target, movement)

Furthermore, you can remove the argument `target` and just use the target property of the event

function parallaxIt(e, movement){
  var $this = $(e.target);

And lastly, make sure all of your selectors are scoped to the element being interacted with (not broad calls to all matches).

 

See the Pen wvWJypq by sgorneau (@sgorneau) on CodePen

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Hey @Shaun Gorneau. There are a few errors in your pen, including an extra semicolon on line 9 that is making the whole demo not function. Maybe you're still working on it or accidentally saved after making some changes?

 

Oh geeze .. yeah, I was chaining some calls and forgot that last semicolon. Doh! 🤦‍♂️

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