hybreeder

Members
  • Content Count

    39
  • Joined

  • Last visited

Community Reputation

0 Newbie

About hybreeder

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. hybreeder

    Overlay end and slide from left to right on mouse leaves

    WOW!! Thanks PointC, Exactly I need like this only. I just need a little bit more help in this. When hover on a button can we slider arrow as well?" something like in the reference.
  2. hybreeder

    Overlay end and slide from left to right on mouse leaves

    Thanks for the reply Mikel I am sharing you the reference link. Please check it. https://takumi.com/ There Is a button called "Learn more" in the "Instagram Experts" section. I need like this. I tried my side but not working.
  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.
  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?
  5. hybreeder

    How to manage GSAP animation in mobile device

    if and else statement is for the condition?. how can we use the CSS like, margin, padding, position etc in the mobile device? We can do for the desktop but how we use for the mobile device?
  6. hybreeder

    How to manage GSAP animation in mobile device

    Can you explain to me because, in future, I have to do more responsive
  7. hybreeder

    How to manage GSAP animation in mobile device

    Thanks for the reply, I checked on google. I haven't found the solution. Even I don't understand where should I start. So I uploaded the question. Can you help me out ?
  8. 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)"}); } });
  9. hybreeder

    smooth scroll one page to another page using gsap

    Thanks for reply replay appreciate your help but I don’t want to use 2 menu. I can directly add the menu code on each page to access without using your above code. But I need it should be only one menu.
  10. hybreeder

    smooth scroll one page to another page using gsap

    Hello, Sorry, I don't have any access to upload the code to the server and share the URL. I am sharing two zip file. One with Jquery script and second with GSAP. Jquery is working but the second GSAP not working. Please check and assist me. test-menu-gsap.zip test-menu-jquery.zip
  11. hybreeder

    smooth scroll one page to another page using gsap

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

    smooth scroll one page to another page using gsap

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

    smooth scroll one page to another page using gsap

    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.
  14. hybreeder

    smooth scroll one page to another page using gsap

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