How to create Nest Thermostat like scrolling effect?

Question

I am writing this after hundreds of references. I want to create/or Nest Thermostat like scrolling effect. I found this solution https://jsfiddle.net/desandro/daZmA/ but its parent has fixed position. Which I can't use within the website.

 window.addEventListener( 'load', function() { var box = document.getElementById('box'), docHeight = document.documentElement.offsetHeight; window.addEventListener( 'scroll', function() { // normalize scroll position as percentage var scrolled = window.scrollY / ( docHeight - window.innerHeight ), transformValue = 'scale('+scrolled+')'; box.style.WebkitTransform = transformValue; box.style.MozTransform = transformValue; box.style.OTransform = transformValue; box.style.transform = transformValue; }, false); }, false);

 body { height: 2000px; } #container { width: 200px; height: 200px; border: 2px solid; position: fixed; } #box { width: 100%; height: 100%; background: red; }

 <div id="container"><div id="box"></div></div>

Can anybody assist me or suggest a good reference or a existing plugin to use?

Thanks in advance

Answer 1

I highly recommend the GSAP scrollTrigger plugin.

https://greensock.com/scrolltrigger/

https://greensock.com/docs/v3/Plugins/ScrollTrigger

https://codepen.io/GreenSock/pen/gOabMXv

https://greensock.com/st-demos/

It makes animating elements based on scroll position very easy. For example

gsap.timeline({ 
  scrollTrigger: {
     trigger: ".thermo",
     start: "center center",
     end: "bottom top",
     scrub: true,
     pin: true
  }
})
.from(".dial",  { y: innerWidth * 1.5 })