Narendra Verma

What I did now I deleted my whole GSAP script and add your script and it's still jumping. I don't know where I am doing wrong. My menu is <ul> <li><a href="/#about">About</a></li> <li><a href="/#services">Services</a></li> <li><a href="/#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul>

If I remove my previous script (GSAP and javascript) and I add below script then it's working according to your href scenario. But I have to use GSAP /** Smooth Scrolling Functionality **/ var jump=function(e) { //alert('here'); if (e){ //e.preventDefault(); var target = jQuery(this).attr("href").replace('/', ''); }else{ var target = location.hash; } jQuery('html,body').animate( { scrollTop: (jQuery(target).offset().top) - 130 },500,function() { //location.hash = target; }); } jQuery('html, body').hide(); jQuery(document).ready(function($) { $(document).on('click', 'a[href*=#]', jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show(); jump(); }, 0); }else{ $('html, body').show(); } }); /** END SMOOTH SCROLLING FUNCTIONALITY **/

Thanks for the reply again Elements with IDs are only on the index.php page. Yes, I know that path scenario. If I add below then smooth scroll not working and my URL is http://somedomain.com/#services. It's jumping on the id's section. <ul> <li><a href="/#about">About</a></li> <li><a href="/#services">Services</a></li> <li><a href="/#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Same as on the terms.php page. I clicked on service and my URL is showing http://somedomain.com/#services but it is also jumping. I need it's smoothly to reach the target.

Thanks for the reply Shaun Gorneau, Is there any other way to do this within a single menu? because of I tried below code but it's jumping directly on target. <ul> <li><a href="index.php#about">About</a></li> <li><a href="index.php#services">Services</a></li> <li><a href="index.php#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Even I tried which you suggested 1) First one. It's not working properly <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="/terms.php">Terms</a></li> </ul> 2) Second one. it is jumping directly on target. <ul> <li><a href="/#about">About</a></li> <li><a href="/#services">Services</a></li> <li><a href="/#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul>

Hello, I am using Greensock animation for smooth scroll clicking on the menu. I have three pages which are `menu.php, index.php, terms.php`. Now I am on `index.php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. No issue on the index page. Now I am on `terms.php` page from there If I click on the about menu then it's not redirecting on the id. I am getting the URL like `http://localhost/test-menu/terms.php#contact` URL should be displayed `http://localhost/test-menu/index.php#contact` Hope you all understand my issue. Would you help me out in this? In the `menu.php` page, I added my menu code which is <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> In the `index.php`, I added the code which is <?php include('menu.php'); ?> <section id="about"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="services"> <h2>Service</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/plugins/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> In the `terms.php`, I added the code <?php include('menu.php'); ?> <section> <h2>terms</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> GSAP smooth scroll script /** Smooth Scrolling Functionality **/ $(document).ready(function() { // Init controller var controller = new ScrollMagic.Controller(); // Change behavior of controller // to animate scroll instead of jump controller.scrollTo(function(target) { TweenMax.to(window, 2, { scrollTo : { y : target-65, // scroll position of the target along y axis autoKill : true, // allows user to kill scroll action smoothly }, ease : Cubic.easeInOut }); }); // Bind scroll to anchor links $(document).on("click", "a[href^=#]", function(e) { var id = $(this).attr("href"); if($(id).length > 0) { e.preventDefault(); // trigger scroll controller.scrollTo(id); // If supported by the browser we can also update the URL if (window.history && window.history.pushState) { history.pushState("", document.title, id); } }; }); }); **Css** ul{margin: 0;padding: 0;list-style: none;} ul li{display: inline-block;margin: 10px;} section{min-height: 500px;}

Sorry, PointC sir and Visual-Q sir, I already checked that and tried but not working for me. I am confused from where should I start. I updated my Codepen. Please check Any more help in this?

Hello, I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom. I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?

Can anyone help me out in this issue? Please

I just need to scroll the elements. I mean first, scroll the content with animation once complete it then scroll the logo animation. Now content and logo both are animated at the same time. When I am scrolling the mouse wheel then my all the TimelineLite script is working. I have to do this one by one

Hello, I have logo and content on my website. I am able to animate the logo and content on page load. I am using the scroll magic plug-in because when the user scrolls the mouse wheel than animate the elements. Now the issue is, My animation is working together, I mean I have to animate first content then I have to animate the logo. After complete, the animation logo than again I have to animate the content. I tried some code but not working. This is my task I have to animate the header content from bottom to top 70% linearly. then I have to animate logo 50% from top to bottom, and then cross. then again I have to animate the content bottom to top which is the last content. Please help me out with this issue.

Thanks for the reply, I checked all the example. I just need a help when the user scroll the mouse wheel Then that circle will scroll from Y position to x position and once it cross it than below text will display

Can anyone help me out in this?

Hello, I have one circle and I am using scroll magic. I have to scroll the circle with 360 degrees and after that circle will hide. I mean one it will cross the screen of the desktop that It will hide and then below content will display on the screen using the mouse wheel. Now my code is not working properly. I mean when I am scrolling the mouse wheel and circle start and end in the center of the pc and content also scrolling. I need when circle crosses the desktop screen than content should scroll. Would you help me out in this?

Hello, I have one circle and I have to rotate 360 on mouse scroll wheel and slide when circle touches the blue border. Now my code is working when I scroll it. But I have to scroll the circle using the mouse wheel and vice-versa. Codepen link is

Hello Sahil, I really appreciate your support. I just want to understand the code. I check the video which you shared with me but that not helped me. I change the p tag and added the span in the script like this. var tween = TweenMax.fromTo($(elem).find('span'), 0.5, {scale: 0.5, yPercent: 100}, {scale: 1, yPercent: 0}); But it is not working if I add the P tag then it's working. Also I removed the all the class and id from the span tag.

Hello Sahil, I know Jquery, It will affect all the P tag in the articles. You know what I did I just remove all the class from SPAN tag in the HTML and remove the P and added the SPAN in the script, to check it is working or not but it's not working.

but it will affect all the P tag in the articles. Right?

Hello Sahil, It will great help if you tell me how to animate single paragraph. $('article').each(function(index, elem){ } Above code will animate the whole article. I need a single paragraph. Any idea?

Hello Sahil, When I checking Change view on the full page is not working properly. I set the id because I have to animate individual and your code is animating the whole article. I have to animate first two articles on the page load and rest of article have to animate on the scroll. Your code is only first article animating. Third articles animating when second articles half goes. It displaying the lots of white space on the right side.

Hello Sahil, I tried that also but it's not working. vertically I can do but horizontally not working with my code.

Hello Shail, My issue not resolved. I just updated the code in codepen and I need when user scroll it than animate the articles on the scroll.

Hello Sahil, Check out the Codepen link

I need to scroll animation when the user scrolls the mouse wheel.Now animation is working on page load. I need content should animate on the scroll. First two articles is working but when I scroll it than animation is not working. I tried some code but not working. would you help me out in this? https://jsfiddle.net/Narendra2015/0gL8k79a/

I tried to form my side https://jsfiddle.net/Narendra2015/3s5su2q3/6/ Now the issue is when I scroll little bit mouse wheel it's working smoothly but when I scroll fast mouse wheel it's also working the same. I mean check the scroll bar speed. Slow and fast both effect is showing same. I need if slow mouse wheel then smooth slowly article if fast mouse wheel then the smoothly fast article. like this site https://www.tentwenty.me/about-us

Thanks, Yes, I am trying to make the tentwenty site.