Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icekomo

Better way to use trigger in ScrollTrigger

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

That's a very unusual request. But to me it looks like you're doing things correctly :) Having multiple ScrollTriggers is not an issue. If you wanted to make your code more DRY you could use Object.assign()

  • Thanks 1
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

@Jack That is exactly what I was looking for, just wasn't sure how to write it. Thank you so much!

  • Like 1
Link to comment
Share on other sites

Not using loops is one of the most common GSAP mistakes. Read about all of them here:

 

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.
×