[Smooth page scrolling with TweenMax]

Well. by the time you had viewed the site I had taken the smooth scrolling out and implemented diff logic for it. The error you saw was from a different event listener that had nothing to do with the smooth scrolling. 

 

The new logic i wrote for smooth scrolling seems to be working well though!

 

Thanks for your reply. I am pretty new to Tweening so it will take some time to adjust learning.

[Smooth page scrolling with TweenMax]

Hi Everyone

 

So i tried to implement the above smooth scroll. Please take a look at the where its being implemented yet it has no way near the effects of the code pen mentioned above. Below is what I used. Any help would be great.

 

Staged-version:  https://aisg-nyc.herokuapp.com/industry

 

Quote

Quote

$('document').ready(() => {
  var html = document.documentElement;
  var body = document.body;
  var scroller = {
    target: document.querySelector("#root"),
    ease: 0.06, // <= 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, true);
    document.addEventListener("scroll", onScroll, true);
  }
  
  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);
    }
  }
});

 

 

 

[Simple Animation of Height on Scroll]

the site that its being referenced from is here: https://www.vrarlesfestival.com/programme/

[Simple Animation of Height on Scroll]

Its my fault i didn't explain myself properly. 

 

This is what i am looking for. 

 

However, I am implementing this in react and the scroll becomes so choppy and looks horrible. 

 

See the Pen MXpEOB by asher978 (@asher978) on CodePen

 

[Simple Animation of Height on Scroll]

Hi Everyone, 

 

First time posting here.

 

I am trying to achieve a simple animate of height on the menu once the user scrolls. I set a trigger in the code pen below. I am hoping someone can guide me how to achieve this. 

 

Thanks

See the Pen MXpEOB by asher978 (@asher978) on CodePen