Jump to content
Search Community

Back to top after button click problem

InboundZA test
Moderator Tag

Go to solution Solved by Rodrigo,

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

Hi Guys,

 

Let me start by saying Im extremely new to animation and jQuery in general but the GSAP library is VERY easy to use and I'm thoroughly enjoying fooling around with it.

 

I have bound an on click event listener to a button that fades out some elements and fades in afew others once clicked ofcourse. This works as expected. However, whenever i click the button, it automatically scrolls back to the top of the window.

 

Code for the button is as follows: 

button.on('click',function() {
    	TweenLite.to([circle1, pbxContent], 1, {opacity: "1"});
   	TweenLite.to([circle1, pbxContent], 1, {display: "block"});
   	TweenLite.to([button, pbxCloud, pbxClouds1, pbxClouds2, pbxPhone, pbxDrives, pbxCable, pbxAnimContent], 1, {opacity: "0", display: "none"});
    	TweenLite.to(pbxCloud, 1, {left: "-300px", top: "110px"});
    	TweenLite.to(pbxClouds1, 1, {left: "-500px", top: "100px"});
    	TweenLite.to(pbxClouds2, 1, {left: "-230px", top: "70px"});
    	TweenLite.to(pbxPhone, 1, { left: "-50px", top: "-220px"});
    	TweenLite.to(pbxDrives, 1, {left: "-410px", top: "20px"});
    	TweenLite.to(pbxCable, 1, {left: "36px", top: "-120px"});
    	TweenLite.to(pbxAnimContent, 1, {left: "-360px", top: "-200px"});
    })

Any help would be greatly appreciated :)

 

Keep up the good work!!

 

Regards,

InboundZA

Link to comment
Share on other sites

That code snippet is not really enough information to diagnose this issue for you. GSAP doesn't scroll the window unless you explicitly tell it to, using the ScrollToPlugin, so the only blind guess I have is that maybe button is anchor tag, or is wrapped by one, and it's adding a fragment identifier to the URL that doesn't exist in the page when clicked. e.g. foo.com/#bar

 

Please consider making a reduced sample on Codepen so we can investigate and figure out what's happening in context.

  • Like 1
Link to comment
Share on other sites

  • Solution

I'd echo Jamie's guess that this is an anchor or perhaps the good old href="#" in there.

 

If so in order to avoid the window going back to the top use the preventDefault() method:

button.on('click',function(event) {
   //this will prevent the usual action for the click event
   event.preventDefault();

   	TweenLite.to([circle1, pbxContent], 1, {opacity: "1"});
   	TweenLite.to([circle1, pbxContent], 1, {display: "block"});
   	TweenLite.to([button, pbxCloud, pbxClouds1, pbxClouds2, pbxPhone, pbxDrives, pbxCable, pbxAnimContent], 1, {opacity: "0", display: "none"});
   	TweenLite.to(pbxCloud, 1, {left: "-300px", top: "110px"});
   	TweenLite.to(pbxClouds1, 1, {left: "-500px", top: "100px"});
   	TweenLite.to(pbxClouds2, 1, {left: "-230px", top: "70px"});
   	TweenLite.to(pbxPhone, 1, { left: "-50px", top: "-220px"});
   	TweenLite.to(pbxDrives, 1, {left: "-410px", top: "20px"});
   	TweenLite.to(pbxCable, 1, {left: "36px", top: "-120px"});
   	TweenLite.to(pbxAnimContent, 1, {left: "-360px", top: "-200px"});
    })
  • Like 1
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...