Jump to content
GreenSock

soheil22

need help with Animation Scrollto with tweenMax

Go to solution Solved by soheil22,

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 everybody,

 

I'll just get right into the work xD

 

here is the thing,  I was trying to animate the scrolling process with tweenMax but I kinda don't know what exactly is going on 

with my code.

so I'll just thought that you guys could help me with it,

here is the scrolling section (which I customized a codepen that was nearly what I wanted it) :
 

var wrapper = $("#wrapper"),
$menu = $(".navbar");
    $menu.on("click","a", function(){
    var $this = $(this),
        href = $this.attr("href"),
        topX = $(href).offset().left;
    TweenMax.to($(window), 2, {
        scrollTo:{
        x: topX,
        autoKill: true
        }, 
        ease:Elastic 
     });
        return false;
});  

What I want to do is, when the user clicked on the tag "a" which is in the "li" tag, the page would scroll into the specified page.

(which is Left to right, instead of top to bottom that's why I've changed the offset into left)

 

I don't know what is wrong with my code, 

when I set the return to True, it scrolls to the page but tweenmax doesn't work!

 

 

Thank you so much,

S.Rb

 

Link to comment
Share on other sites

hmm, not so sure what's wrong just by looking at the code. It would really help if you could create a CodePen demo that clearly illustrates the problem with as little code as possible. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Might be good to just find the original CodePen you based your code off of, fork it, and edit it so that it fails in a similar fashion to your production code. We don't need to see any fancy images or the real layout. Just enough to see it not working. 

 

Thanks!

  • Like 1
Link to comment
Share on other sites

  • Solution

hmm, not so sure what's wrong just by looking at the code. It would really help if you could create a CodePen demo that clearly illustrates the problem with as little code as possible. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Might be good to just find the original CodePen you based your code off of, fork it, and edit it so that it fails in a similar fashion to your production code. We don't need to see any fancy images or the real layout. Just enough to see it not working. 

 

Thanks!

 

Solved the problem xD

 

I'll mention the solution here for those who have same problem as me 

 

I'll double checked my entire Js code, and I was sure that it's completely okay,so I thought that it might be the css!

and I was right :D

I had to hidden the overflow because of the wrapper width (which is more than the viewport), but my problem was,

I've accidently set the overflow property to hidden for both my "BODY" and the "Wrapper" which is wrong,

and when I removed the overflow property from the wrapper, it works Perfect xD

 

anyway,

Thank you Carl , because of your fast answer;

and sorry if I took your time, because of an accidental issue.

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