Jump to content
Search Community

Using scrollTrigger timeline but I should use custom options

Amini test
Moderator Tag

Recommended Posts

Hi, I tried to use a timeline with scrollTrigger and it worked well. 

 

const sections = gsap.utils.toArray('.item2');

gsap.timeline({
	scrollTrigger: {
    	trigger: '.wrapper',
      	start: 'center center',
      	pin: true,
      	srub: 1
    }
})
.to('.item1', {
	top: 50
})
.to(sections, {
	x: 50
})

 

The problem is that there is four items in *sections* which will cause a fast scroll speed on them and makes it look awkward because of the *scrub 1* and I wanted to use *scrub 4* on them. So I changed the code to this.

 

gsap.timeline()
.to('.item1', {
	top: 50,
  	scrollTrigger: {
    	trigger: '.wrapper',
      	scrub: 1,
      	pin: true,
     	start: 'center center'
    }
})
.to(sections, {
	x: 50,
  	scrollTrigger: {
    	trigger: '.wrapper',
      	// I want to use a custom scrub here
      	scrub: 4,
      	pin: true,
      	start: 'center center'
    }
})

But then another problem occurred which caused the timeline not to be working properly.

How do I set a custom scrub on an element without blowing the timeline?

See the Pen Barjjjy by amini-py (@amini-py) on CodePen

Link to comment
Share on other sites

Hi there Amini, 

 

You don't need to add a ScrollTrigger to each tween on this timeline. You were on the right track the first time.

 

If you want the timeline to last for more time you have to move the end marker further down the page. e.g.

 

const sections = gsap.utils.toArray('.item2');

gsap.timeline({
	scrollTrigger: {
    	trigger: '.wrapper',
      	start: 'center center',
      	pin: true,
      	scrub: 1,
        end: '+=3000px'
    }
})
.to('.item1', {
	top: 50
})
.to(sections, {
	x: 50
})

 

Hope this helps!

Link to comment
Share on other sites

I appreciate it @Cassie, I'm afraid to say this wasn't exactly 100% what I wanted. By adding `end: '+=3000px'` it takes more time to finish but then the first tween would take longer to finish. All I want is to customize the speed of elements by adding custom scrub as @ZachSaucier wrote in this article. I'm okay with first tween's speed, but I want the second tween's scroll speed to be a bit slower.

Link to comment
Share on other sites

Then you need to change the tween's durations (as Zach says in that post)
 

Quote

So the duration values don't matter too much, but the the proportions of the duration of each tween compared to the total time of the timeline with scrub: true does matter. It might be helpful to use a total duration of the timeline (like 1 second or 10 seconds) so that it's easier to think about the proportions of how much you want an animation to run.


e.g. - this first tween will last twice as long as the second tween.

 

gsap.timeline({
	scrollTrigger: {
    	trigger: '.wrapper',
      	start: 'center center',
      	pin: true,
      	scrub: 1,
        end: '+=3000px'
    }
})
.to('.item1', {
  top: 50,
  duration: 2
})
.to(sections, {
  x: 50,
  duration: 1
})

 

Link to comment
Share on other sites

@Cassie Yes it did at all. Designer brought up a new problem that it should scroll up and exit from pin after the animation gets finished. In this case it let's me scroll up but the animation finishes later. That is simply because of the duration. Any suggestions?

 

Link to comment
Share on other sites

I'm afraid I don't follow.

 

Minimal demos are always super helpful to illustrate what you mean - we're looking at many demos per day and don't have the same context/understanding as you - so you have to back up and help us out a little bit with explanations. 

 

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