Jump to content
GreenSock

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

Magnetic Button with GSAP

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

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?

  • Like 1
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

It's still throwing some errors when I hover over the texts. Maybe your target(s) are incorrect?

Link to comment
Share on other sites

21 minutes ago, ZachSaucier said:

It's still throwing some errors when I hover over the texts. Maybe your target(s) are incorrect?

Good lord ... Monday fog brain here ... I was chaining simple tweens as if I was working with a timeline. 😕

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