dedeinc Posted December 14, 2023 Share Posted December 14, 2023 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. 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) See the Pen eYxaPEO by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen Link to comment Share on other sites More sharing options...
Sujan Posted December 14, 2023 Share Posted December 14, 2023 @dedeinc I've forked your pen and done some gsap. I don't know if it meets your requirement or not. Hope it works See the Pen abXrPZQ by devSanjay (@devSanjay) on CodePen 1 Link to comment Share on other sites More sharing options...
dedeinc Posted December 14, 2023 Author Share Posted December 14, 2023 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) Link to comment Share on other sites More sharing options...
Sujan Posted December 14, 2023 Share Posted December 14, 2023 @dedeinc sorry, I didn't get you. Can you elaborate more, what you want to achieve. you mean to say scale up the video only after reaching the center??? Link to comment Share on other sites More sharing options...
Toso Posted December 14, 2023 Share Posted December 14, 2023 no need to pass 2 scrollTriggers into the same timeline, I fixed that code and left some comments See the Pen ZEwNdGW by ahmed-attia (@ahmed-attia) on CodePen and that another may be helpful See the Pen ExrzBgX?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen and this topic is the one you looking for if you want to jump into something cooler (clipPath, clip-path, SVG mask) 4 Link to comment Share on other sites More sharing options...
dedeinc Posted December 15, 2023 Author Share Posted December 15, 2023 @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? Link to comment Share on other sites More sharing options...
dedeinc Posted December 15, 2023 Author Share Posted December 15, 2023 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 15, 2023 Share Posted December 15, 2023 Hi @dedeinc Something like this? Everything starts like you want it on page load, then you have one ScrollTrigger that starts as soon as you start scrolling which scales the video until it hits the top of the browser. Then a second ScrollTrigger takes over which pins the video and fades the text. Of course we can't make the effect you envisioned in your head perfectly that also isn't the goal of this forum. We try to help you understand the tools better, so if this isn't perfect, just fork one of the pens someone else already suggested and try to tweak it to your liking, if you then get stuck post a new demo with the things you've tried, that way we can we can see your thought process and thus beter help you understand the tools! See the Pen eYxwvQP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! 2 1 Link to comment Share on other sites More sharing options...
Solution dedeinc Posted December 18, 2023 Author Solution Share Posted December 18, 2023 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) See the Pen wvNVqdK by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 18, 2023 Share Posted December 18, 2023 Alright. Just to be sure, do you still have a question? Or is your problem solved? Feel free to mark one of the post as "Mark as Solution", even you're own post will do. 1 Link to comment Share on other sites More sharing options...
dedeinc Posted December 19, 2023 Author Share Posted December 19, 2023 My issues are solved, because of @Sujan, @Toso, @mvaneijgen. Thanks to you guys! 3 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