Alok Paul Posted March 7, 2021 Share Posted March 7, 2021 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2021 Share Posted March 8, 2021 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. 1 Link to comment Share on other sites More sharing options...
Alok Paul Posted March 8, 2021 Author Share Posted March 8, 2021 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2021 Share Posted March 8, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now