Hello
Dear members of this forum can i please ask for a little guidance. I want to combine three.js and gsap/scrollTrigger. My page structure is simple:
two sections both with height: 100vh
First section is simple hero baner that is not containing any animation (not relevant for the issue) and the second section is a place when magic should happen.
I animating three.js model as soon as the second section hits the viewport and I did it by absolute postioning inside relative parent, creating a timeline with all the changes to model (rotation, scale, lighting, camera movment) and connect it all with scroll trigger (using "pin" propery) and this works like charm.
Since I cant use codepen i will paste code here (so sorry)
js:
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".scene-wrapper",
start: "top",
scrub: 1,
pin: true
}
});
timeline
.to(ambientLight, {intensity: 4, duration: 0.4}, 'scene1')
.to(mainLight, {intensity: 5, duration: 0.4}, 'scene1')
.to(model.rotation, {y: -Math.PI / 2, duration: 4}, 'scene2')
.to(model.position, {x: 0, duration: 3}, 'scene2')
.to(camera.position, {y: 0, duration: 3}, 'scene2')
.to(camera.position, {z: 4, duration: 2.5}, 'scene3')
.to(model.rotation, {z: -0.8, duration: 3}, 'scene3')
.to(model.rotation, {y: -2.6, duration: 3}, 'scene3')
.to(model.rotation, {z: 0, duration: 3}, 'scene4')
.to(model.rotation, {y: -3.1, duration: 3}, 'scene4')
.to(camera.position, {y: 0.4, duration: 3}, 'scene4')
.to(camera.position, {z: 6, duration: 3}, 'scene4')
html:
<div class="wrapper">
<div class="section one">
<h1>Funny stuff</h1>
</div>
<div class="section two scene-wrapper">
<div class="background-container">
<div class="animation-container"></div>
</div>
<div class="scroll-container">
<section class="scene-1 scene">
<div class="copy-wrapper">
<h2 class="headline">This is 3D Model approach</h2>
<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</section>
<section class="scene-2 scene">
<div class="content-column">
<div class="copy-wrapper">
<h2 class="headline">Scene 2</h2>
<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="content-column">
</div>
</section>
<section class="scene-3 scene">
<div class="copy-wrapper">
<div class="content-column">
</div>
<div class="content-column">
<div class="copy-wrapper">
<h2 class="headline">Scene 3</h2>
<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
</div>
</section>
<section class="scene-4 scene">
<div class="copy-wrapper">
<h2 class="headline">Scene 4</h2>
<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</section>
</div>
</div>
</div>
As you can see inside ".scene-wrapper" i have container for aniamtion AND for 4 sections that i called scenes. My model is pined to a container and stays always on top of the screen (thats desired behaviour) but now i want to hide ans show this 4 texts from the "scens" in particular moments of my aniamtion and I dont know how to approach this.... So question to you dear forum:
1. Should I add animations of each text to the created timeline and create even longer timeline that i have right now or create separate timeline for text ?
2. Do I need second scrollTrigger instance just for texts ?
To give you an idea what I want to create please see screenshots
NOTE: this is free model downloaded from Sketchfab