Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra786

Scrubbing animation and moving viewport with ScrollTrigger

Recommended Posts

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.

 

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

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