Gsap Scroll Animation

[Swarup Kumar]

I am new to learn in GSAP ,
Can any one help me to solve this issue, I want to start my light when my fan start,
Both need to be same scroll start and scroll end.
Here is my code
 

gsap.registerPlugin(ScrollTrigger);
gsap.to("#fan", {
  scrollTrigger: {
    trigger: "#fan",
    toggleClass: 'active',
    scrub: true,
   start:"top 85%", //when top of fan passes 75% viewport height
      end:"bottom 45%", //when bottom of fan passes 25% viewport height
    toggleActions:"play pause reverse pause"
  },
  
  perspectiveOrigin: "center 100vh", 
  ease: "none"
});

gsap.to(".lamp", {
  scrollTrigger: {
    trigger: ".lamp",
    endTrigger: ".footer",
    toggleClass: 'lampMove',
    scrub: 1,
    markers: true,
   start:"top top-=850", //when top of fan passes 75% viewport height
      end:"bottom top", //when bottom of fan passes 25% viewport height
    toggleActions:"play pause reverse pause"
  },
});

See the Pen OJNRdpX by uiswarup (@uiswarup) on CodePen

[ZachSaucier]

Hey Swarup and welcome to the GreenSock forums. 

 

If you want both to have the same scroll start and scroll end, you just need to make sure those values and the triggers are the same for both. However, since all you're doing is toggling a class, you can just use the callbacks on one ScrollTrigger to toggle the class on the lamp:

See the Pen ZEWpgxe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

With that being said, we don't recommend using CSS animations because using GSAP makes it much easier to create and maintain your animations, it works around cross-browser bugs, and it gives you more control over your animations  Learn more about it in our getting started article: