<img class="smile" src="https://assets.codepen.io/756881/smiley.svg" />
<p>scroll down & change your reduced motion settings</p>

@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

body {
  min-height: 250vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
}

.smile {
  width: 150px;
  height: 150px;
}

p {
  position: fixed;
  width: 100%;
  bottom: 1rem;
  text-align: center;
}

gsap.registerPlugin(ScrollTrigger);


/*** Different ScrollTrigger setups that respect motion preferences ***/
ScrollTrigger.matchMedia({
	
	// no motion preferences - go wild!
	"(prefers-reduced-motion: no-preference)": function() {
		// Any ScrollTriggers created inside these functions are segregated and get
		// reverted/killed when the media query doesn't match anymore. 
    let tl = gsap.timeline({
          scrollTrigger: {
          trigger: ".smile",
          scrub: 1,
          end: "200%",
          pin: true,
          start: 'center center',
          end: 'bottom 20%',
        }
      });
    tl.to(".smile", {scale: 2, rotation: 360})
      .to(".smile", {scale: 1});
  }, 
  
	//  option with less problematic motion for people with vestibular disorders and motion sensitivities   
	"(prefers-reduced-motion: reduce)": function() {
		// Any ScrollTriggers created inside these functions are segregated and get
		// reverted/killed when the media query doesn't match anymore. 
    let tl = gsap.timeline({ 
        scrollTrigger:{
          trigger: ".smile",
          scrub: 1,
          end: "200%",
          pin: true,
          start: 'center center',
          end: 'bottom 20%',
        }
      });
    tl.to(".smile", {opacity: 0.1})
      .to(".smile", {opacity: 1});
  },   
});