Jump to content
GreenSock

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

hybreeder

Members
  • Posts

    44
  • Joined

  • Last visited

Posts posted by hybreeder

  1. Actually, I have a menu.php file and I added all the menu code in that and  I included the <?php include('menu.php');?> on all the pages.

     

    I just added my code in the codepen to understand my code.

     

    Yes, Using "smothscrollclass" I added in the menu(Menu is dynamically to It will display on all the pages).

    Yes, My about link does not start with "#" because of I have about us page and once the user clicks on it then it will redirect on the aboutus.php page.

     

    but from the aboutus.php page, If I click on contact us then my URL is showing  http://localhost:8080/example/aboutus.php#contactus

    which is wrong because contactus section is on my home page not on about us.

  2. I am using GSAP. I am getting the issue on the smooth scroll.

    I have two pages. home.php and aboutus.php I have one menu and I am adding dynamically on all the pages.

    I am on the home page and if I click on the contactusthen smooth scroll is working and my URL is http://localhost:8080/example/home.php#contactus which is correct.

    Now my issue is, I am on aboutus page and when I click on contactus i am getting the URL http://localhost:8080/example/aboutus.php#contactus

    It's not redirecting on the homepage because I have a contactus section on the home page.

    I tried <li><a href=".php#contactus">Contactus</a></li> but then my smooth scroll not working.

     

    Would you help me out in this?

    See the Pen YbdNVX by Narendra_verma (@Narendra_verma) on CodePen

  3. Hello,

    I have a button. When a user hovers over it then blue overlay will come and slide from left to right and stop until the mouse leaves. There is no issue here. It's working.

    Now

    If the user removes the mouse hover then I have to end the blue overlay from left to right and It will come on the normal button.

     

    When I remove the mouse hover it's going to the right to left side.

    Also when hover on the button "How can I change the color of text and arrow"?

     

    Thanks in advance.

     

     

    See the Pen JapPbV by Narendra_verma (@Narendra_verma) on CodePen

  4. Hello,

     

    I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag.

     

    Now my issue is,

    I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that.                                           

    I don't want a smooth scroll when the user clicks on part1 or part2.  

       

    <div class="tabs">
                <ul class="tab_click">
                      <li class="current"><a href="#part1" >Part1</a></li>
                      <li><a href="#part2">part2</a></li>
                </ul>
          </div>


    I need a smoth scroll when user click on the below anchor tag. 

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

     

    Would you help me out in this issue?

     

     

     

     

     

    See the Pen bjgXyK by Narendra_verma (@Narendra_verma) on CodePen

  5. Hello,

     

    I am using GSAP for animation, What I am going is when user scrolls the 300 from the top then .signup_header class will active with top:100 which is working in the desktop. Now I have to set top:50px in the mobile device then how can I set for it.? because in the mobile also it's talking 100px.

     

    I mean can we change the animation or CSS for the mobile device?


     

    $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 300) {
                TweenMax.to(".signup_header", 0.1, {css:{display:"block",top:100}, ease: Power4.easeOut});
                TweenMax.set( $('.main_menu'), { boxShadow: "none"});
            } else {
                TweenMax.to(".signup_header", 0.1, {css:{display:"none",top:0}, ease: Power4.easeOut});
                TweenMax.set( $('.main_menu'), { boxShadow: "0px 0px 4px rgba(0,0,0,0.18)"});
            }
            
        });

     

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

  7. 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 **/

     

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

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

     

  10. 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;}

  11. 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?

     

    See the Pen wXMNZK by Narendra_verma (@Narendra_verma) on CodePen

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

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

     

     

     

    See the Pen EbMoqB by Narendra_verma (@Narendra_verma) on CodePen

×