Jump to content
Search Community

Setting start and end progress for a scrollTrigger scrub animation

sosilver test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello,

I have a timeline that is being controlled by scrollTrigger using scrub. Rather than have the scrollTrigger start the animation sequence at a progress of 0 and complete at 1 would it be possible to define the values for the starting or ending point of the animation for use with scrollTrigger?

 

I would like to take my timeline and define its starting point / starting frame to already be 10% of the way into the animation or a progress of  0.1. Then if a user would scroll up, scrollTrigger would not go lower than 0.1 progress of the timeline animation.

 

For example: lets say a circle moved 100 pixels left over 10 seconds. How could I setup a scrollTrigger timeline such that I could define the start of the animation to a progress of .1 (10 pixels to the left) and end at .9 (90 pixels to the left). 

 

const master = gsap.timeline({
	start: 0.1,
  	end: .9,
	scrollTrigger:{
		trigger: '#dod',
		start: "20% 0%",
		end:"+=4000",
		target: "#dod_diagram",
		anticipatePin: 0.1,
		//markers: true,
		scrub: 0.2,
		pin: true,
		pinSpacing: true,
		onUpdate: self => console.log("progress:", self.progress)
	}
});

 

Thank you for any suggestions!

 

  • Like 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...