Jump to content
GreenSock

junik91

Sync elements with ScrollTrigger

Recommended Posts

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

 

scene1.png

Scene2.jpg

Scene3.jpg

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • 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.
×