Narendra786

Yes, thats exactly what I wanted! Thanks

Ok, that will do!

I thought of that but I do not want first timeline to be affected or controlled by scrolling. I want it to start automatically without the user scrolling, and while its happening, the user shouldn’t be able to scroll. The user can scroll only after the first timeline has completed.

Thank you, that solved the issue! Could you also help me with this

I have created a simple svg animation. The animation I created works perfectly but at the start of the scroll, the entire screen slightly jumps up. Also at the end of scrolling, the screen goes goes completely blank. I am not sure if there is some scrollTrigger method that would help me solve this problem. Any help would be helpful. Also, I would like to enable the about_back timeline's scrolling only after the first timeline i.e. about_anim has completed. Note: I have used a timeline instead of a simple gsap.to() because after I solve this issue, I hope to add some more complex animations to the timeline

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

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.

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.

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.

After some research I realised that the GSAP Physics2D plugin perfectly suits my needs. So I started trying it out on codepen and everything works nicely except for the fact that I am unable to apply easing to the rocket and also the rocket stops when I stop moving the joystick but haven’t released it yet. Any help on this line would be helpful. https://codepen.io/Narendra786/full/bGwZOrL

So the overwrite:'auto' worked perfectly. However, I haven't applied any bounds to the joystick because the outer container is circular and not rectangular. So, I just added some logic to end drag if it is a particular distance from center. Hence, maxX and maxY is simply undefined.

Hello, I want to control a rocket image with a virtual joystick. I was able to create the joystick and rotate the rocket when the joystick is dragged (thanks to gsap's draggable plugin). However I am not able to change the rocket's position when the joystick moves. Basically, I want to make the rocket move as long as the user drags the joystick and change direction according to the joystick. I also want to increase the rocket's speed as the circle inside the joystick moves farther, but I suppose I can do that with timeScale() method. I tried changing rocket's position but it simply stops after some distance even though I am still moving the joystick. Any help would be very helpful since I am stuck on this since a long time.