Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Swarup Kumar

Gsap Scroll Animation

Recommended Posts


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

Link to post
Share on other sites

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:

 

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×