junik91 Posted August 11, 2021 Share Posted August 11, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 12, 2021 Share Posted August 12, 2021 Hi junik! Welcome to the forums. Do you think you can put a minimal demo up on CodePen? It doesn't have to be an exact clone of what you're working. The simpler the better. It really hard to give advice without seeing it. 2 Link to comment Share on other sites More sharing options...
mikel Posted August 12, 2021 Share Posted August 12, 2021 Hey @junik91, Unfortunately I am not a three.js expert. As far as the appropriate positioning of your text animation is concerned, try it with scrollTigger onUpdate and place the anims anlog to the progress as you like. Here's an example See the Pen qBqEeMj by mikeK (@mikeK) on CodePen And: As Blake says, a minimal demo would be helpful. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now