Jump to content
GreenSock

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

How to get the changing offset position of an element during tweenMax

Recommended Posts

I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?

 

See the Pen aNLEZL by anon (@anon) on CodePen

Link to post
Share on other sites

Hi,

 

The issue here is that you're not changing the scroll property but the x transform value of the element containing the images, therefore the scroll value never changes, in fact if you check the scrollLeft property it's always 0.

 

I can suggest two options. If you want to stick with the scroll value, use GSAP ScrollTo plugin:

 

http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

 

With it, you'll be able to animate the scroll position of the element and using an onUpdate callback, check when the scroll value has passed a certain point.

 

Another option is keep using this approach and also use an onUpdate callback to check the progess of the animation and at a certain value, show the right button. Progress is very neat because it shows... well the progress of the animation between zero and one, being zero the animation's starting point and one the final point of the animation:

 

http://greensock.com/docs/#/HTML5/GSAP/Core/Animation/progress/

 

For example if you want the right button to be visible after the 80% of the animation is completed, it could be like this:

tl = new TimelineMax({
    paused: true,
    onUpdate: checkValue
});

// onUpdate callback
function checkValue(){
  if( tl.progress() >= 0.8 ) {
    TweenLite.to('#right-btn', 0.6, {
      x: 0
    }, 'ease:Sine.easeIn');
  }
}
  • Like 4
Link to post
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.

×