Jump to content
Search Community

Better way to use trigger in ScrollTrigger

icekomo test
Moderator Tag

Recommended Posts

I'm new to ScrollTrigger but I would assume that I am doing this the long way. I actually want 3 different DOM elements to trigger the same timeline  animation. The way I am currently doing that is working, I just think there has to be a better / cleaner way.

 

ScrollTrigger.create({
    animation: headerColorChange,
    trigger: "#index-intro",
    toggleActions: "restart reverse restart reverse",
    markers: true,
    //id: "index-intro",
    start: "top 74",
    end: "bottom 74"
});


ScrollTrigger.create({
    animation: headerColorChange,
    trigger: "#index-brands-container",
    toggleActions: "restart reverse restart reverse",
    markers: true,
    //id: "index-brands-container",
    start: "top 74",
    end: "bottom 74"
});

ScrollTrigger.create({
    animation: headerColorChange,
    trigger: "#index-weather",
    toggleActions: "restart reverse restart reverse",
    markers: true,
   // id: "index-weather",
    start: "top 74",
    end: "bottom 74"
});

 

Link to comment
Share on other sites

Here's one other option: 

gsap.utils.toArray("#index-intro, #index-brands-container, #index-weather").forEach(element => {
	ScrollTrigger.create({
		animation: headerColorChange,
		trigger: element,
		toggleActions: "restart reverse restart reverse",
		markers: true,
		start: "top 74",
		end: "bottom 74"
	});
});

 

  • Like 2
  • Thanks 1
Link to comment
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.
×
×
  • Create New...