Mlbb lan

You may create a project with two or more pages in codepen. Create a demo, I am also interested in this issue.

thank you very much for your time. I will definitely check everything and follow your recommendations! thanks!

Thank you guys, but unfortunately, this is not what I am looking for. I've already created the animation I need, you show good examples, but they have nothing to do with my question. Probably it's about css, or maybe it's about the gsap script itself. But I cannot understand the error. I recorded a video because we don't understand each other and I had to record a video with a bug, I put it on the google drive because I see no other option. I will try to explain again what the problem is and maybe you know the solution? When I change the width or height of my browser (chrome, safari, opera, bing, etc...) my sea is cut off. The original size of my png image with the sea = 1200px. If I reduce my browser, the sea automatically becomes about 300-400px. And this is not because of the css properties. There is a conflict of some kind. Please see the video I attached above in the message because otherwise I can't explain it any other way. And I really need the help of professionals.

https://drive.google.com/drive/folders/1vCj02unuSZI4K3-Opj1fzFD7LoOJved3?usp=sharing webflow has nothing to do with this. please watch the video, on google drive. In the video, I reduced the size of the browser screen

http://dl4.joxi.net/drive/2020/10/19/0038/0786/2519826/26/9a4219b928.png Yes, sorry I have bad English. Click on the link above. Or open my site: https://discavery.webflow.io/ Animation works as I need, it's not about the animation itself. The point is that when we reduce the screen size, the photo is automatically cropped. Do you see it? Just try to reduce the size of the browser.

Sorry, I had to create the code right away. Yes, I agree that tweenmax shouldn't be used, they don't matter. Even in this minimal demo, the animation breaks when the screen changes. Look again, this is what I mean: first open the browser not full width, scroll through the animation, you will see a nice parallax effect, then open the browser full width and you will notice how my animation did NOT adapt and the sea was cut off. https://codepen.io/GeorgeDesign2020/pen/wvWWjZX

hello. I'm working on a project that uses gsap animation ScrollTrigger + smooth scrollbar, you can see the problem in the link below: There is a ship in the second block and in the background, if you open it from 1920x1080 and then reduce it, the sea is cut off and the animation breaks. What can you do with it? If necessary, I will provide godepen, I just did not recreate it. If it helps to solve the problem. https://discavery.webflow.io/

thank you, the decision with important helped

hey, you know how to turn off the scroll track in this example? i'm testing locomotive + gsap, it's ok, but i can't figure out how to remove this idiotic strip.

thanks. I will try to take small steps

https://codepen.io/GeorgeDesign2020/project/editor/AJnPPg# Friends. I faced a big problem in my project. I created an animation for the appearance of photos from mouse movements. But my animation conflicts and doesn't work with gsap.min.js I found out this way: I turned off each script and watched whether my picture animation worked or not and I found out that if I remove the gsap.min.js script, the animation works, but my smooth scroll disappears. You can see more details in my project. I concealed the script the gsap.min.js script for you to see the photo animation. Turn it on the script to understand what I'm talking about. Once all the scripts are active, the smooth scrolling works, but the imagesLoaded script stops performing its function.... I understand that you can't answer all the questions, but I really ask you to tell me what's wrong?

thank you so much! yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!

I will try! thank you for the quick answer!

I read all the above and tried to understand how I should reinitialize scripts. In my project, gsap scripts don't update when you move from one page to another. https://codepen.io/GeorgeDesign2020/project/editor/ZLrYEY

Hello, everybody. Not so long ago I started studying GSAP and fell in love with its features. I have achieved almost everything I wanted for my project and not long ago I started to study the Barba js bibliography. My question probably concerns GSAP + Barba interaction. If you open the project and scroll through not much to a block with a project called Blue (there are guys on a moto), you can click on the photo and you will be redirected to another page, absolutely the same. Apart from the fact that the first block says: this PROJECT PAGE or this INDEX PAGE First the gsap animation is played, and then there is a transition and at this point all my scripts stop working, you can see that the base scrollbar is back and smooth animation with ScrollTrigger stopped working. I saw an example of barba + gsap + locomotivescroll, but I don't know much about it yet and I'm asking you to look specifically at my example. Help me set up my script correctly so that my animation will play, and then the page will open and all scripts will work correctly. https://codepen.io/GeorgeDesign2020/project/editor/ZLrYEY

this is just great! you are the best, thank you!!?

Thank you very much for your help! It got a little better again https://codepen.io/GeorgeDesign2020/pen/VwaBJJo?editors=1010 it's still not as smooth as the cubberto and it's very important... however, I can no longer distract you. You've helped me very much and with your help I almost got the result I wanted. I will study the documentation and maybe I can find a solution. Thank you again. somewhere exactly in the center of the text stops for a second and then continues its movement again. It is striking to the eye. It is this almost invisible stop scroll. I scroll to 50% of the screen approximately, I think you noticed).

is not much better, but still something is wrong. I changed duration from 0.33 to 1 to make the transition smoother. But still, the text itself is a bit chaotic. What could be the problem? https://george-studio.webflow.io/untitled

everything really works much better when you change the screen size! Thank you . Can I ask you to see the last detail of which I have been suffering for 3 hours? I use the web-flow, but it does not matter. Please look at the example I implemented with your help: https://george-studio.webflow.io/untitled scroll down and you will see how the text smoothly appears and rises to the top. But when we want to go back to the top of the page and scroll back, the text is very wrong. Too fast and too sharp, not as smooth as https://cuberto.com/ they have it somehow smoothly up and down. I suppose it's in the start&end settings that something needs to be corrected?

i love you! thank you very much. you made my day!

Yes !!! Thank you! The last thing me need to do is to have the text on the left for each project. How to achieve this? So that it is not merged. And be at a distance of 300px from each other. Could you add any text from lorem ipsum for example? Please!

https://codepen.io/GeorgeDesign2020/pen/MWyBqzx

Hi, I created a CodePen demo. My job is to make the black block change the pictures. <div class>= 'panel blue' 'panel red' 'panel orange' are my project pictures. Here is an example of what I am trying to achieve with gsap + locomotive scroll: https://cuberto.com/. On the screenshot I wrote what I mean. I'm not interested in the project shift effect, I want the usual effect, for example: https://codepen.io/GreenSock/pen/BaowPwo I hope my question is clear and you can help me to implement this block with projects. What do I need to write, what code have I missed?

I'm trying to recreate the sticking effect exactly like yours https://cuberto.com/ but taking into account the smooth scrolling of locomotive scroll + scrollTrigger. But my attempts are unsuccessful. The demo you threw off doesn't quite fit with locomotivejs in mind. Can I ask you to create a simple demo version that uses at least 2 cards? It is important that a smooth scrolling script with scroll Trigger js is installed there

Thank you very much, dear Jesper!!