Jump to content
Search Community

Multiple Scrolltriggers controlling three.js camera jumps

dave@friks.nl test
Moderator Tag

Recommended Posts

Hi People,

 

i'm trying to control the camera in three.js with multiple scrolltriggers to look at all my hexagon corner points in 3d space. The concept is that the camera needs to move and zoom in whitin the "camera" divs part (the red outlines) then it need to stop one section (the "hexa-sections") and continue from that corner point to the next corner point.

When i make one timeline it works well but now i need more scrolltriggers bu now the camera jumps back to start position of the camera en recenters the hexagon in screen.

Is there a work-around to get a the scrolltriggers follow-up each other so the animation is continuing?

Thanks

See the Pen eYKKVvb by Knerp (@Knerp) on CodePen

Link to comment
Share on other sites

 

Hello there!

 

This is one of the most common ScrollTrigger mistakes, as outlined in this article - you are creating .to()-logic issues since you have multiple ScrollTriggers controlling the same properties of the same object. One way to work around that is to set immediateRender: false on latter ScrollTrigger of yours, as can be seen in the fork of your pen below. Hope this will help - happy tweening!

 

 

See the Pen WNyyJYp by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

1 hour ago, dave@friks.nl said:

I''m still wondering if i can make the animations more smooth at the end (the moment when the scroller-end is in position) ?
Or maybe something of a camera path that smooths the animation more?

 

Those are questions probably a lot more related to three.js than they are related to GSAP.

 

I'm not the most versed with three.js, but I could imagine tweening on anything that is related to controls (like you are on the controls.target) not to be the best idea - because as the name already indicates, that is likely something that is controlled from inside of three.js, and if you are going to manipulate it in any way from outside, you are likely creating conflicts of some sort.

 

If you take those tweens out of the equation, you'll see, that things are a whole lot smoother already. This fork here tweens on your hexagon's position and rotation instead, which probably is the better route to create something close to / similar to your example.

 

three.js also has a rather active forum, if you've got some more questions with regard to three.js

 

https://discourse.threejs.org/

 

See the Pen gOKKKML by akapowl (@akapowl) on CodePen

  • Like 2
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...