ScrollTrigger timeline with ThreeJS animations

[Lee Probert]

I am trying to run two tweens simultaneously using `ScrollTrigger`. I have had success tweening the camera position but I also need to tween the `opacity` value of a material at the same time as the camera tween but with slightly different timings. Here is my code:

let camera_anim = gsap.timeline();

camera_anim.add('start')

.to(this.camera.position, {

x: targetPosition.x,

y: targetPosition.y,

z: targetPosition.z,

ease: "power1.inOut"

}, 'start')

.to(this.planeBackgroundMaterial, {

opacity: 0,

ease: "power1.inOut"

}, 'start');



ScrollTrigger.create({

trigger: ".section-header",

pin: true, // pin the trigger element while active

start: "top top", // when the top of the trigger hits the top of the viewport

end: "+=500", // end after scrolling 500px beyond the start

scrub: 1,

animation: camera_anim,

});

The result of this is that I can scroll through the camera position tween but the material's `opacity` takes just as long to fade to zero. I would like the opacity change to only happen between 0 and 250 pixels of the scroll (the camera tweens between 0-500).

Edited July 4, 2022 by Lee Probert
I fixed part of the issue

[akapowl]

 

Hello there, Lee - welcome to the GSAP forum.

 

Since you've already set the different tweens in your timeline to start simultaneously at the beginning of that timeline, just adjust the durations of the tweens, to fit your needs.

 

E.g. set the tween that is supposed to be scrubbed through the whole 500 pixels to duration: 1 and the tween that is supposed to tween through only the first 250 pixels to duration: 0.5

Here's how durations work with scrubbing ScrollTriggers:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

I hope that will help. If it doesn't, a minimal demo of yours would be greatly appreciated!

 

[Lee Probert]

I figured out that `duration` is a percentage of the timeline duration so I can adjust the timings easily by setting the main animation with a duration of `100` and the material can be set at `80` or whatever. You can also set the second part of your timeline element to start 10% of the way in by using `10` instead of the label `start`. Good stuff.