Jump to content
GreenSock

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

Having some issues using GSAP to create a Scroll back to top button

Recommended Posts

Hey GS community,

 

I'm a complete novice when it comes down to using GSAP. I am trying to recreate this 'back to top' functionality, which seems to have a pullback effect like a pinball machine before it launches. I believe it's using the same GSAP plugins, but it is compiled in webpack which makes it hard for me to decipher. 

 

Here is the link to the example as mentioned. If you scroll down to the footer, there should be a clickable arrow which triggers the back to top action.

https://maximilianberndt.com/dreamDiary.html

 

My question is how do I reproduce this with the code I have on Codepen.
https://codepen.io/brnlmco/pen/OJJXzOR

 

Thanks!

Edited by brnlmco
Needed to add searchable tags

Share this post


Link to post
Share on other sites

@Shaun Gorneau 
Thanks for the fast response Shaun!

I'm running into a small issue. So I am targeting 'html, body', which is the very top-level of the page—when I click nothing actually happens. Maybe I have the wrong placement in my code?
 

  $('#back_to_top').on('click', function(e) {
  e.preventDefault();
  TweenMax.to( window , 2.5 , {scrollTo: 'html,body', 0, ease: Power4.easeInOut } );
});

 

  $('#back_to_top').on('click', function(e) {
  e.preventDefault();
  TweenMax.to("html,body" , 2.5 , {scrollTo: 0, ease: Power4.easeInOut } );
});

Share this post


Link to post
Share on other sites

Hello @brnlmco and Welcome  to the GreenSock Forum!

 

The ScrollToPlugin also accepts a selector, not just a number.

 

So if it was me i would add a id attribute with the value of top . And then animate up to that html tag with the id called top.

 

<html id="top">

So it would look like this since the scrollTo value accepts a number or a CSS selector.

 

TweenMax.to(window, 2, {scrollTo:"#top"});

Please see the ScrollToPlugin docs:

 

https://greensock.com/docs/v2/Plugins/ScrollToPlugin

 

Happy Tweening! :)

  • Like 3

Share this post


Link to post
Share on other sites
37 minutes ago, brnlmco said:

@Shaun Gorneau 
Thanks for the fast response Shaun!

 

You got it! I think Jonathan has you covered on the rest 👍

  • Like 2

Share this post


Link to post
Share on other sites

@Jonathan
Thanks for chiming in.
Unfortunately, I haven't found a working solution. It might be a bigger issue with my messy JS File.

Might be better if I share the actual code for debugging..
 

HTML

<!DOCTYPE html>
    <html id="top" lang="en">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Uniqlo, Work</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
 
        <!-- Favicon -->
        <link href="img/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
        <link href="img/favicon/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
        <link href="img/favicon/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
        <link href="img/favicon/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
        <link href="img/favicon/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
        <link href="img/favicon/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
        <link href="img/favicon/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
        <link href="img/favicon/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
        <link href="img/favicon/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
        <link href="img/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
        <link href="img/favicon/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png">
        <link href="img/favicon/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
        <link href="img/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
        <link href="img/favicon/manifest.json" rel="manifest">
        <link href="img/favicon/safari-pinned-tab.svg" rel="mask-icon">
        <meta content="Brian Lam" name="apple-mobile-web-app-title">
        <meta content="Brian Lam" name="application-name">
        <meta content="#da532c" name="msapplication-TileColor">
        <meta content="img/favicon/mstile-144x144.png" name="msapplication-TileImage">
        <meta content="#ffffff" name="theme-color">
 
        <!-- Opengraph Facebook -->
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://brnlm.co">
        <meta property="og:title" content="Brian Lam, Digital Experience Designer">
        <meta property="og:description" content="A digital experience designer who believes in tackling problems through empathy and rigorous research. I aspire to hone my abilities to empower people and improve communities.">
        <meta property="og:image" content="">
 
         <!-- GSAP -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
 
        <!-- CSS Stylesheet -->
        <link rel="stylesheet" href="css/aos.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    <body>
        <div class="top_loader"></div>
            <!-- Scroll Container -->
            <div class="scroll__container">
                <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="loader" class="enter"></div>
           <header class="site_header" data-aos="fade-up" data-aos-delay="200" data-aos-offset="50" data-aos-duration="1000" data-aos-easing="ease-out-quad">
                <div class="frost"></div>
                  <div class="row">
                      <div class="logo">
                          <a href="brnlm.co" class="back__link page__back link-line">
                              <span class="back-icon icon-arrow-left"></span><span>back</span></a>
                      </div>
  
                      <!-- Navigation -->
                          <nav class="site_nav">
                              <ul class="nav_list">
                                  <li class="link-line">
                                      <a href="http://brnlm.co">Work</a>
                                  </li>
                                  <li class="link-line">
                                      <a href="info.html">Info</a>
                                  </li>
                                  <li class="link-line">
                                      <a href="https://drive.google.com/file/d/1pFyKAT_ahpku2JMRVd9iQSHTrVszsG6A/view?usp=sharing">Resume</a>
                                  </li>
                              </ul>
                          </nav>
                      <!-- End of Navigation -->
                  </div>
          </header>
            <a class="mobile_menu" href="#"> <?xml version="1.0" encoding="utf-8"?><svg version="1.1" class="burg" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="14 -14 48 48" style="enable-background:new 14 -14 48 48;" xml:space="preserve"> <style type="text/css"> .st0{fill: #FFFFFF;}</style> <g> <circle id="Oval-2" class="st0" cx="38" cy="10" r="24"/> <g> <rect x="31" y="5" width="14" height="2"/> <rect x="31" y="9" width="14" height="2"/> <rect x="31" y="13" width="14" height="2"/> </g> </g> </svg> <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="14 -14 48 48" style="enable-background:new 14 -14 48 48;" xml:space="preserve"> <style type="text/css"> .st0{fill: #FFFFFF;}</style> <g> <path d="M276,440h80v80h-80V440z"/> </g> <g> <path d="M302.4,484.6l17.7-17.7l8.5,8.5l-17.7,17.7L302.4,484.6z"/> </g> <g> <g> <path d="M302.4,475.4l8.5-8.5l17.7,17.7l-8.5,8.5L302.4,475.4z"/> </g> </g> <g> <g> <path d="M276,440h80v80h-80V440z"/> </g> </g> <g> <g> <path d="M302.4,484.6l17.7-17.7l8.5,8.5l-17.7,17.7L302.4,484.6z"/> </g> </g> <g> <g> <path d="M302.4,475.4l8.5-8.5l17.7,17.7l-8.5,8.5L302.4,475.4z"/> </g> </g> <g> <circle id="Oval-2" class="st0" cx="38" cy="10" r="24"/> <g> <rect x="31" y="9" transform="matrix(0.7071 0.7071 -0.7071 0.7071 18.2015 -23.9413)" width="14" height="2"/> <rect x="31" y="9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.0593 29.7992)" width="14" height="2"/> </g> </g> </svg> </a>
            
            <!-- Project Section -->
            <section class="project__section">
                <div class="project__container">
                    <div class="project__labels">
                        <span class="category">UX/UI</span> 
                        <span class="divider"></span> 
                        <span class="year">2019</span>
                    </div>
                    <div class="project__title">Uniqlo</div>
                </div>
            </section>
            <!-- End of project section -->
            
            <!-- Project Cover -->
            <section class="project__cover">
                <img class="mb-5 mb-sm-5 mb-md-5 mb-lg-66" src="img/full_width image_100.jpg" alt="Uniqlo Cover">
            </section>
            <!-- End of project cover -->
 
            <!-- Project Info -->
            <section class="project__info">
                <div class="row">
                    <div class="col-sm-5 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                        <div class="project__scope">
                            <ul class="scope__list">
                                <div class="project__small__text">Scope<span class="icon icon-arrow-down"></span></div>
                                    <li>Content Strategy</li>
                                    <li>Launch Strategy</li>
                                    <li>Technical Strategy</li>
                                    <li>UX Strategy</li>
                                    <li>Experience Mapping</li>
                                    <li>Research</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-7 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                        <div class="project__scope">
                            <ul class="scope__list">
                                <div class="project__small__text">Overview<span class="icon icon-arrow-down"></span></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Ut diam quam nulla porttitor. Donec massa sapien faucibus et molestie ac feugiat sed lectus.</p>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End of project info -->
 
            <!-- Project Case Study -->
            <section class="case__study__section">
                <div class="case__study__inner">
                    <div class="row">
                        <div class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                            <figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                <img src="img/full_width image_100.jpg" alt="">
                                    <figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
                            </figure>
                            
                            <div class="case__study__desc">
                                <div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                    <div class="case__study__small__text">Project Label</div>
                                    <div class="case__study__large__text">Large Heading</div>
                                    <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                    <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                </div>
                            </div>
 
                            <figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                <img src="img/full_width image_100.jpg" alt="">
                                    <figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
                            </figure>
 
                            <div class="case__study__desc">
                                    <div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                        <div class="case__study__small__text">Project Label</div>
                                        <div class="case__study__large__text">Large Heading</div>
                                        <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                        <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                        <p class="case__study__text">
                                            <ol class="numbered__list">
                                                <li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
                                                <li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
                                                <li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
                                                <li>Lorem donec massa sapien faucibus. Massa id neque aliquam vestibulum morbi. Tortor posuere ac ut consequat semper viverra ac placerat.</li>
                                            </ol>
                                        </p>
                                    </div>
                                </div>
 
                                <figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                    <img src="img/full_width image_100.jpg" alt="">
                                        <figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
                                </figure>
                                
                                <div class="case__study__desc">
                                    <div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                        <div class="case__study__small__text">Project Label</div>
                                        <div class="case__study__large__text">Large Heading</div>
                                            <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                            <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                            <p class="case__study__text">
                                                <ul class="bullet__list">
                                                    <li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
                                                    <li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
                                                    <li>Id velit ut tortor pretium viverra suspendisse potenti. Tristique magna sit amet purus gravida quis blandit turpis cursus. In metus vulputate eu scelerisque felis imperdiet. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer.</li>
                                                    </ul>
                                            </p>
                                    </div>
                                </div>
 
                                <figure class="mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                    <img src="img/full_width image_100.jpg" alt="">
                                        <figcaption>Lorem sed risus ultricies tristique nulla aliquet enim. Purus faucibus ornare suspendisse sed nisi.</figcaption>
                                </figure>
 
                                <div class="case__study__desc">
                                    <div class="col-md-12 mb-5 mb-sm-5 mb-md-5 mb-lg-66">
                                        <div class="case__study__small__text">Project Label</div>
                                        <div class="case__study__large__text">Large Heading</div>
                                        <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
 
                                        <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
 
                                        <p class="case__study__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et. Amet porttitor eget dolor morbi non arcu. Tellus cras adipiscing enim eu turpis egestas pretium. Dolor magna eget est lorem ipsum dolor sit amet. Sem nulla pharetra diam sit amet nisl suscipit.</p>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End of project case study -->
            
            <!-- Pre Footer -->
            <div class="pre__footer">
                <div id="back_to_top"><img src="img/top.svg" width="36" height="39"></div>
                    <p class="pre__footer__small__text">Next Project<span class="icon icon-arrow-down"></span></p>
                    <p class="pre__footer__text">
                        <a class="footer__link" href="/brainmate">    
                            <span class="footer__link__text">Brainmate</span>
                                <span class="footer__link__mask" aria-hidden="true">
                                    <span class="footer__link__mask__text">Brainmate</span>
                                </span>
                        </a>    
                    </p>
            </div>
            <!-- End of pre footer -->
            
            <!-- Footer -->
            <footer class="footer">
                <div class="footer-container">
                    <a class="link-line" href="" target="_blank">Email</a>
                    <a class="link-line" href="" target="_blank">Are.na</a>
                    <a class="link-line" href="" target="_blank">Dribbble</a>
                    <a class="link-line" href="" target="_blank">LinkedIn</a>
                    <a class="link-line" href="" target="_blank">Twitter</a>
                </div>
            </footer>
            <!-- End of footer -->
            </div>
            <!-- End of scroll container -->
 
        <!-- JS -->
        <script src="js/aos.js"></script>
        <script src="js/nav.js"></script>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

 

JS

// Refresh page to top
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
 
// AOS
$(function() {
  AOS.init();
});
 
$(window).on('load', function() {
  AOS.refresh();
});
 
// Top Loader
var h = document.documentElement,
  b = document.body,
  st = 'scrollTop',
  sh = 'scrollHeight',
  progress = document.querySelector('.top_loader'),
  scroll;
 
document.addEventListener('scroll', function() {
  scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  progress.style.setProperty('--scroll', scroll + '%');
});
 
// Smooth Scrolling
$(function() {
  var html = document.documentElement;
  var body = document.body;
  
  var scroller = {
    target: document.querySelector(".scroll__container"),
    ease: 0.05, // <= scroll speed
    endY: 0,
    y: 0,
    resizeRequest: 1,
    scrollRequest: 0,
  };
  
  var requestId = null;
  
  TweenLite.set(scroller.target, {
    rotation: 0.01,
    force3D: true
  });
  
  window.addEventListener("load", onLoad);
  
  function onLoad() {    
    updateScroller();  
    window.focus();
    window.addEventListener("resize", onResize);
    document.addEventListener("scroll", onScroll); 
  }
  
  function updateScroller() {
    
    var resized = scroller.resizeRequest > 0;
      
    if (resized) {    
      var height = scroller.target.clientHeight;
      body.style.height = height + "px";
      scroller.resizeRequest = 0;
    }
        
    var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
  
    scroller.endY = scrollY;
    scroller.y += (scrollY - scroller.y) * scroller.ease;
  
    if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
      scroller.y = scrollY;
      scroller.scrollRequest = 0;
    }
    
    TweenLite.set(scroller.target, { 
      y: -scroller.y 
    });
    
    requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
  }
  
  function onScroll() {
    scroller.scrollRequest++;
    if (!requestId) {
      requestId = requestAnimationFrame(updateScroller);
    }
  }
  
  function onResize() {
    scroller.resizeRequest++;
    if (!requestId) {
      requestId = requestAnimationFrame(updateScroller);
    }
  }
  });
 
// Back to Top
  $('#back_to_top').on('click', function(e) {
    e.preventDefault();
    TweenMax.to(window, 2, {scrollTo:"#top"});
  });

Share this post


Link to post
Share on other sites

@brnlmco

 

That's far too much to wade through to help. If you have this running live somewhere, I may be able to help by looking into developer tools. But, knowing that scrollTo works quite simply, if it's not working for you I have a feeling there is some other JS interfering.

  • Like 2

Share this post


Link to post
Share on other sites

Either way what @Shaun Gorneau or I recommended will work. Yes i agree with Shaun you probably have a conflict.

 

Don't forget to check your browser console.. hit the F12 key on your keyboard to see if you see any errors.

 

Looks like you have a lot code to rummage through. You should start removing various parts of your page and slowly add code parts back in.

 

Also keep in mind that the beforeunload is bad practice since browsers will block any scripts being binded to that event due to the abuse of unwanted pop ups.

 

And you have the following scripts in there:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script> 

All you really need is TweenMax since it includes the above with the exception of the ScrollToPlugin.min.js

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script> 

Happy tweening!

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×