Multiple ScrollTriggers for one value

[AANassim]

Hello there
New to GSAP here, sorry in advance if this question has been asked before ! 

I have two sections ("section_one" & "section_two") I want to animate a float from 0 to 5 when scrolling the first section and then from 5 to 10 when scrolling the second section.
The code works as intended when I remove the ScrollTriggers, but when I add them, the value resets back to 0 between the first and the second trigger.

Here is a code pen sample where you can see the logs of the value in the console.

Thanks in advance for you help !

See the Pen jEOqKyO by AANassim (@AANassim) on CodePen.

[mvaneijgen]

Hi @AANassim welcome to the forum!

 

You're making one of the most common ScrollTrigger mistakes, you cant nest ScrollTrigger inside tweens of timeline https://gsap.com/resources/st-mistakes/#nesting-scrolltriggers-inside-multiple-timeline-tweens when working with a timeline ScrollTrigger can only be on the whole timeline, not on individual tweens

 

35 minutes ago, AANassim said:

I want to animate a float from 0 to 5 when scrolling the first section and then from 5 to 10 when scrolling the second section.

Can you maybe explain in different words what you're tying to do? I'm not sure what you mean by the above sentence. 

 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

What also seems weird to me is that you're animating an object called obj which has a value x and then also animate the property x, the property x in GSAP is mapped to the CSS value transform: translateX();

 

I've forked you're pen, removed the nested ScrollTrigger issue and moved it to the timeline. I've commented it out for now because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  

 

Because I'm not sure what it is you want to do, I've created a new element with a value of 0 and tweened its textContent to 5 and then in the second tween to 10 with a small pause in between the to tweens.

 

Hope it helps and happy tweening! 

 

See the Pen jEOqpPV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

[AANassim]

Hey ! Thanks for the quick reply !

To give more context on what I am trying to do, I am working on a React ThreeJS project and I am trying to animate the camera position and rotation of my 3D scene using the scroll.
I have a "Canvas" object that renders the 3d scene setup as a background on top of which I display some html.
I have access to my Camera object which has a position and rotation property that I am trying to animate using GSAP.
For example :
When the first section is on the visible, I want my camera to be placed at (0, 5, 0) with a rotation of (0, 45, 0), when the second section is visible on the view port, I want my to be place at (10, 7, 0) with a rotation of (45, 0, 30).

I've managed to make the animation work on the camera but when I try to add the scroll trigger it doesn't behave as I intended. (the camera rotation snaps back to it's initial position and rotation when it enters the second trigger)
 

1 hour ago, mvaneijgen said:

What also seems weird to me is that you're animating an object called obj which has a value x and then also animate the property x, the property x in GSAP is mapped to the CSS value transform: translateX();
 

I didn't want to animate the CSS value. I do not understand how to animate a particular value of an object, can you give me an example on how to do that please ?

Thanks ! 

[Rodrigo]

Hi,

 

Without having a lot of knowledge on THREEJS but as far as I can tell the position property is actually an object with the three axis on it, so it would be like this:

console.log(camera.position); // { x: 0, y: 0, z: 0 }

So in GSAP you can actually tween the values of that particular object like this:

const tl = gsap.timeline();

tl.to(camera.position, {
  x: 10
})
.to(camera.position, {
  y: 50
})
.to(camera.position, {
  z: 100
})

That would move the camera to 10 on the X axis, then to 50 on the Y axis and finally to 100 on the Z axis. Of course you can move the camera in one tween as well:

const tl = gsap.timeline();

tl.to(camera.position, {
  x: 10,
  y: 50,
  z: 100
})

Or you can use the position parameter in order to create some overlap between each tween as well.

 

I believe for the rotation the approach should be the same, just keep in mind that in THREEJS rotation is in radians as far as I know so the values would be a bit different.

 

Hopefully this helps

Happy Tweening!

[AANassim]

Hey thanks for the reply !

Yes this is exactly how I animated the camera. But the issue I have appears when I add the ScrollTrigger.
When I change the value of my object in the first ScrollTrigger, it changes correctly but when I enter the second ScrollTrigger, the value of my objects resets to it's initial value.
In the code pen linked above, I am printing the X value of my Object obj (you can see it on the console of your browser). When I enter the second ScrollTrigger the values goes back to 0 instead of increasing from 5 to 10.
To better understand my issue, I added here a screenshot of the logs.
I am expecting the 3rd value to be something greater than 5 instead of it starting back from 0.
 

[GSAP Helper]

If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue. Your original CodePen demo had the problem that @mvaneijgen called out, where you had multiple ScrollTriggers in nested animations inside a common parent timeline (that's not logically possible to accommodate). Are you saying you fixed that and it still doesn't work the way you'd expect? Please provide a very clear minimal demo and we'd be happy to take a peek. 👍

[Rodrigo]

Maybe use immediateRender false in your second ScrollTrigger instance's config:

https://gsap.com/docs/v3/GSAP/Tween/vars/#immediateRender

 

Another option could be to use a fromTo instance as well.

 

Happy Tweening!

[AANassim]

Hey !

Yes sorry, I forgot to say that I fixed the codepen based on what @mvaneijgen pointed out, and still have the issue (I forked the codepen to update it here is the

See the Pen RNwRZdZ by AANassim (@AANassim) on CodePen.

) I removed the timeline and used gsap.to directly.
@Rodrigo I tried to set immediateRender to false but still have the issue.
What's really bugging me is that when I remove the scrollTrigger, the animation is behaving correctly. (I add the two animations to one timeline without scrolltrigger)
I added a screenshot of the logs with and without the scrollTrigger.

I think I am going to just wrap the two sections in one container and I will be using that container for this specific scrollTrigger since I do not need to repeat this in my project. I
t's not a clean solution but at least it works
Thanks again for the help !

[mvaneijgen]

The issue here is that you have two tweens targeting the same element. If you would to use a timeline with one ScrollTrigger this would work like a charm. Timelines are build to have things play in sequence and that is what you want here. So just create a timeline and set up your ScrollTrigger logic where you want it to start an where you want it to end. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen JojKeNB?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen.

[AANassim]

Didn't know about the endTrigger property ! This is perfect for my use case ! Thank you !

[mvaneijgen]

Great! Highly recommend giving the docs a once over, you'll be surprised how much has been already thought of that you didn't even know you needed!

 

Hope it helps and happy tweening!