On scroll videos and text fade animation

[Alok Paul]

Hello, good day. I'm new to GSAP. I'm working on a project where I implemented GSAP to create a video fade with some text animation on mouse scroll. The logic of the animation is when we scroll the mouse wheel the video and the text change with a fade animation. The whole page is going to contain the same animated section two times. Each section is going to have 4 videos(so for 2 sections total of 8 videos) and the video will change after scrolling the mouse. Hope you got an idea about the animation. Check the actual animation that I'm looking for https://www.loom.com/share/0fca10c0f566413aa1e05f1ed8412acc

 

For the first section, the animation is working fine but when I am trying to create the second section which is almost similar to the first section I'm getting issues.

 

So please if anyone can give me some idea that how can I do it then I will be really very thankful. Also, you can inform me if I'm did anything wrong. Also please let me know if there any other better solution to do the same kind of animation. Thanks in advance.

See the Pen BaQOOJw by shuvosd (@shuvosd) on CodePen

[ZachSaucier]

Hey Alok and welcome to the GreenSock forums.

 

As I commented on StackOverflow, if you're trying to get the sections to snap instantly, ScrollTrigger isn't built for that because it doesn't support scroll-jacking (purposefully).

 

In this case I could create a single large timeline for all of your sections. In that timeline you have .add()/.call()s to fire off the animations and play/pause your videos as needed. Then I would scrub through that timeline using ScrollTrigger based on the scroll position. 

[Alok Paul]

5 hours ago, ZachSaucier said:

Hey Alok and welcome to the GreenSock forums.

 

As I commented on StackOverflow, if you're trying to get the sections to snap instantly, ScrollTrigger isn't built for that because it doesn't support scroll-jacking (purposefully).

 

In this case I could create a single large timeline for all of your sections. In that timeline you have .add()/.call()s to fire off the animations and play/pause your videos as needed. Then I would scrub through that timeline using ScrollTrigger based on the scroll position. 

Hey, ZachSaucier thanks a lot for your reply. Honestly speaking I'm a beginner in this animation world. So it will be really very helpful to me if you can share some references or a better explanation on how to make scroll jacking animation similar to the reference video. Thanks a lot for the suggestion that you already given. Stay safe.

[ZachSaucier]

Sorry, scroll-jacking is a far from simple thing and explaining how to do it is out of scope for these forums. If you have a specific question about GSAP let us know and we'll do our best to help.