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?