Alok Paul

I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease . Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity. For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.

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.

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.