dedeinc

My issues are solved, because of @Sujan, @Toso, @mvaneijgen. Thanks to you guys!

Hi, @mvaneijgen! Thank you for your idea! I've fixed the code that to keep the center of river video on the viewport until to reach the section 2. (In the default viewport of code pen, the image shrinks as the screen height decreases, I have set the overall width of the element narrower) https://codepen.io/tozpsqam-the-animator/pen/wvNVqdK

Hi, @Toso! Thanks to your minimal demo! but It seems to have some different point that I'd like to do. ・The river video scale ups while scrolling at the same time ・The center of river video always keep on the viewport until to reach the section 2 SVG mask is also good ways, Thank you, I'll check this topic.

@Sujan, I mean to say the video scale ups while scrolling, the issue is other point. Please look at the image of current situation. The center position of river video is under the viewport, but I'd like to always keep the center of river video on the viewport until to reach the section 2 like this clip. demo.mp4 I probably think the size of river video needs to fit the bottom of viewport, but I'm not sure. Is there any way to fix it?

Hi, @Sujan! Thanks for your idea! May I ask a question? Is it possible to always keep the position of the video in the element to the center? It is positioned well above the center before scrolling on the demo. Please see the reference video. I have put a red circle at the center position as a marker. (There is 1 megabyte limit on this board, I deleted the video on the first post)

Hi, everyone on GSAP community! I'm attempting to make an animation with ScrollTrigger. ◯What I'd like to do 1. Expand the video to the entire viewport according to scrolling. 2. change the position of the video to the center when it expands. 3. After the video is expanded, display the title as it scrolls. Keep the video displayed throughout the viewport until the title is displayed. ◯The issues ・Scrolling and video enlargement timing does not match. ・Video cannot be pinned to entire viewport while title is displayed. https://codepen.io/tozpsqam-the-animator/pen/eYxaPEO Do you have any idea to fix the animation of them? Please look at attached video file of the behavior image for reference. (There is 1 megabyte limit on this board, Please look at my latest post)

Hi, @Rodrigo! I fixed the code and that's going well. That was so helpful your content to keep scrolling after the third one gets pinned. It's all thanks to you!

Hi, I'd like to make the behavior that multiple sections stacked while scrolling. I referenced the official demo and then I made a mini demo, but the behavior doesn't work. ◯The issues Scrolling position seems to slip for a moment around the border between each sections. When changing screen size, the same slipping behavior come up. Scrolling stop at the end of 3rd section, It doesn't go to the 4th section. (please look at that by 0.5x or 0.25x) https://codepen.io/tozpsqam-the-animator/pen/rNPdbga Do you have any idea to fix the behavior of them? ◯ScrollTrigger demo that I referenced

Hi, @mvaneijgen ! I didn't have the thoughts that to get the images inside the current scrolling container. I fixed the code and solved them. I greatly appreciate that your advice for the issues!

Hi, there. I'm considering GSAP and ScrollTrigger to implement a horizontal scroll animation. ◯What I would like to implement Horizontal scrolling (2 blocks) Parallax of images Display of headings and body text ◯Plug-in ScrollTrigger When I implemented it, there is no behavior problem with 1 block, but when I increase to 2 blocks, scrolling and other behaviors do not seem to work at all. 【In the case of 1 block】 (Please press 0.5x or 0.25x) https://codepen.io/tozpsqam-the-animator/pen/WNPXEOe 【In the case of 2 blocks】 https://codepen.io/tozpsqam-the-animator/pen/YzBYPRO Is there any way to work the behavior of images, headings, and body text work even with two blocks? By the way, even in the case of two blocks, if the behavior of images, headings, and body text are disabled, it will work fine. 【In the case of 2 blocks (without the behavior of images, headings, and body text)】 https://codepen.io/tozpsqam-the-animator/pen/eYxeWRM