Jump to content
GreenSock

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

Individual link animation on mouse hover

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Everyone,

 

I am revamping my website. I am not very good with Java script and for this reason I am here asking for help.

The project I need the help for can be checked on

 

As you can see I have 3 links on the right hand side and any time I click on the circle a different slide is coming from the left hand side.

I have noticed that when I am hovering my mouse on the circle marked as Case studies all the circles stops their animation. I would like to pause only the one I am hover and when I leave I would like the circle start pulsating back again in synchro with the others. Also I would like to nest an animation on mouse over.

 

Another thing I would like to ask if the sidebar animation can be done in a better way from the programming point of view.

 

I am not very good at explaining things. I hope this explanation is clear enough.

 

 

 

I wish you all a great day,

Alex

See the Pen WwPyPG by aleguitar77 (@aleguitar77) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for posting the demo.

 

In order to make things clear and get the best help it really helps to ask a single question per post related to the GSAP API. 

I'm really not sure what you mean about nesting an animation on mouseover. Regarding the sidebar and the general setup of the project, I just don't have a ton of time to dig into all that (but someone else may have some ideas).

 

Regarding the pulsing buttons. I have figured out a way to pause the one you mouseenter and then synch it up with the other when you mouseleave.

In order to focus on the problem at hand I removed a lot of the un-related html and js. Just easier for me to think that way.

 

//grab all the buttons
var btns = $(".btn")


//give each button its own animation
btns.each(function(index, element){
  this.animation = TweenMax.from(this, 1, {opacity:0, scale:0, repeat:-1, yoyo:true})
})


//pause this button's animation on mouseenter
btns.mouseenter(function(){
  this.animation.pause();
})


//match this button's totalProgress() to another button's totalProgress on mouseleave
btns.mouseleave(function(){
  //find the first button that in the group of buttons that isn't this button
  var notThis = btns.not(this)[0];
  //find that button's animation
  var notThisAnimation = notThis.animation;
  //set this button's progress() equal to that button's total progress
  this.animation.totalProgress(notThis.animation.totalProgress()).play(); 
})

http://codepen.io/GreenSock/pen/xVMMXY?editors=0010

  • Like 3
Link to comment
Share on other sites

@Carl - that is slick. I was just sitting here thinking about how we could check the progress of the other two and apply it to the paused button and then you posted your solution. Very nice sir.  8-)

 

Hi aleguitar77  :)

 

Welcome to the forums.

 

I didn't have a lot of time either so I just added a couple things to Carl's pulsating button solution and made three colored divs to represent your side content. Since we're getting the index of those buttons, we can use it to choose which side div comes into view on click and the other two animate out. It's not super refined, but it should help lead you to a more compact piece of code without repeating too many things.

var btns = $(".btn")
var side = $(".side")

TweenMax.set(side[0],{left:0})

//give each button its own animation
btns.each(function(index, element){
  this.animation = TweenMax.from(this, 1, {opacity:0, scale:0, repeat:-1, yoyo:true})
  this.onclick = function() {
    TweenMax.to(side,0.5,{left:-200})
    TweenMax.to(side[index],0.5,{left:0})
  }
})

See the Pen EKrrML by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 3
Link to comment
Share on other sites

nice assist, Craig!

Link to comment
Share on other sites

WoW! Thanks for the lightning fast reply. I have been on several forums in the past but I have barely been answered. I am impressed!

 

Carl - By saying nesting an animation I meant having another animation on mouseover instead of just pause it. To make it more clear I can show you an example I have found on this website http://www.adidas.co.uk/ace_16 To see the pulsating circle you will only need to scroll a couple of sections down.

 

Thanks again guys for taking your time to reply to my questions.

 

Have a great day.

  • Like 3
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.
×