ScrollTrigger with Camera both position and rotation change, jump animation bug ?

[monster9]

Hi,

 

I have basic scene in ThreeJS and simple HTML sections. Each HTML element has height is viewport height unit (vh) and them content has TextNode in HTML you can for see as for debugging.

 

Each HTML section has camera different both position and rotation values. So, single camera, only different values for per section. I want correctly work ScrollTrigger when scrolling, but I have bug and I couldn't solve that. First time correctly work but then take bug. You examining while codepen example, you will see that bug. 

 

I didn't write other sections because these have same logic. First two section, shows my bug. 

 

Thanks.

Good work.

See the Pen jOpLGJo?editors=0010 by fatihmert (@fatihmert) on CodePen

[GreenSock]

You're making one of the most common ScrollTrigger mistakes - nesting tweens with ScrollTriggers inside a timeline. It's logically impossible for an animation to be controlled by a parent timeline AND a ScrollTrigger (the scroll position). They could be fighting for control in opposite directions. 

 

If you want to coordinate things inside one timeline, then just attach one ScrollTrigger to that timeline (not any of the child tweens), like this: 

See the Pen MWBvQRW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[monster9]

I understand.  Each instanced timeline actually has specific range (e.g. ScrollTrigger). There have keyframes in that (to, fromTo etc.). And I each try connect to timeline instances. This is my fault.

 

Also, link is very benefit. Althought I read documentation, I didn't see this. I must have overlooked it.

 

Thanks.

Good work.