Scrubbing animation and moving viewport with ScrollTrigger

[Narendra786]

Hello,

Although I have used some GSAP, I am quite new to Scroll trigger and am not sure how to implement my idea. I have created a simple animation (using GSAP) of a person walking on a simple road with a few trees and mountains.  Here is what I want to do:

a. Add some kind of parallax effect where the man moves fastest, followed by the trees and the mountains moving the slowest.

b. I want to control the animation (scrubbing) including the person’s speed and direction (forward or backward).

c. The viewport should move on scroll along with the person because right now the person walks out of viewport after some time and I need to manually scroll with it. 
d. Optionally, I want the viewport to follow a motion path when I scroll, so I am able to make it catch up with the animation’s motion path.

 

[mikel]

Hey @Narendra,

 

Take a look at this example.

 

See the Pen zYrPrgd by creativeocean (@creativeocean) on CodePen.

If you have a specific question, please show your case - only a reduced structure - in a CodePen.

 

Happy tweening ...

Mikel

 

[Narendra786]

Thanks Mikel, the example will suffice my needs. However, can you explain the logic and the code behind it because I found it a little bit confusing. 
P. S. I’ll upload the my Codepen soon.

[ZachSaucier]

The JS has some comments. What, specifically, are you having trouble understanding about it?

[Narendra786]

Here are the things I didn’t understand: 

a) What is the purpose of scrollDist?

b) Does the ‘pos’ variable have to be in pixels?

c) What does the highlighted text below represent:

     .from('#container', {opacity:0, ease:'power1.inOut', duration:1}, 0.3)

d) In the timeline below the comment “//tween the svg path + circle”, how can I add animations to the circle or some other object (with scrub:true) because I tried and it gave me weird results.

[ZachSaucier]

Keep in mind that we didn't create this demo, @creativeocean did

 

57 minutes ago, Narendra786 said:

What is the purpose of scrollDist?

It's what Tom (Creative Ocean) used to determine the total length of the ScrollTrigger. You could use an alternative method of setting that distance.

 

57 minutes ago, Narendra786 said:

Does the ‘pos’ variable have to be in pixels?

No, quickSetter works with any unit so long as you set it that way. Pixels are the most common unit for this sort of thing though.

 

58 minutes ago, Narendra786 said:

.from('#container', {opacity:0, ease:'power1.inOut', duration:1}, 0.3)

That's the position parameter.

 

59 minutes ago, Narendra786 said:

how can I add animations to the circle or some other object

It'd depend on what sort of animations you're trying to add and where. It's too general of a question for us to really answer.

[mikel]

Hey @Narendra786,

 

You could position tweens according to the scrolling progress

 

See the Pen qBqEeMj?editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy scrolling ...

Mikel

 

[Narendra786]

Thanks a lot Mikel and Zach! Both the codepens helped a lot. Thankfully, my issue was solved.