Mlbb lan Posted October 19, 2020 Share Posted October 19, 2020 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/ Link to comment Share on other sites More sharing options...
mikel Posted October 19, 2020 Share Posted October 19, 2020 Hey @GeS, If you want to animate the sea. Try this .sea__img { position: absolute; top: 50%; height: 150%; } But I suspect you want to animate the yacht. Please create a CodePen only with this motif and your desired animation. Happy sailing ... Mikel 1 Link to comment Share on other sites More sharing options...
akapowl Posted October 19, 2020 Share Posted October 19, 2020 Hey @GeS Just from looking at your ScrollTrigger-Code, I can see, that there is something not right with it. 'druation' for instance, doesn't exist in GSAP. var tl = gsap.timeline({ scrollTrigger: { trigger: "section.about__container", scroller: "#viewport", scrub: 0.05, pin: true, start: "top top", end: "+=250%", }, }); tl.from(".sea__img", { yPercent: -50, druation: 2, ease:Power0.easeNone, }).to(".sea__img", { yPercent: 50, druation: 2, ease:Power0.easeNone, }); Mikel is right, if you want further assistance on this, please create a minimal demo of your issue, so it makes it easier to help debugging for us. Also, @GreenSock already gave you some hints about what to avoid in this thread But I see, you are still loading TweenMax and TimelineMax alongside GSAP 3.5.1. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 19, 2020 Share Posted October 19, 2020 1 hour ago, akapowl said: 'druation' for instance, doesn't exist in GSAP. True it doesn't and what he has is invalid, but since scrub is true the duration is 0.5 by default. Since the durations are the same this bug is effectively ignored because the proportions of the durations between the ScrollTriggers are the same but I agree it should be fixed, just noting it doesn't cause an issue in this case. See this post for how to migrate to GSAP 3. See this thread for how to make a minimal demo 2 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 19, 2020 Author Share Posted October 19, 2020 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. See the Pen wvWWjZX by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 19, 2020 Share Posted October 19, 2020 Hey GeS. Please stick to English in these forums, even if you're using a translator. I went ahead and translated your last post. You demo seems to work for me once I fix your broken HTML. If it's not working like you expect it to please be more clear what you're expecting/wanting it to do. See the Pen dyXXKNV?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 19, 2020 Author Share Posted October 19, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 19, 2020 Share Posted October 19, 2020 I don't see any cropping happening. Do you mean it's not positioned where it's supposed to be? If you're asking about how to fix the positioning in Webflow, that's a bit out of scope of what we have the resources to help out here in the GSAP forums. But if you have a question specific to GSAP please let us know and we'll do our best to help out. Link to comment Share on other sites More sharing options...
akapowl Posted October 19, 2020 Share Posted October 19, 2020 @GeS You have a mistake in your HTML Your <sction class="about__container"> should be a 'section' instead, I suppose. I changed it, and it seems to fix things for me. See the Pen 1b4fac9b6581697e6d8594ae318f893b by akapowl (@akapowl) on CodePen Here is a clearer example, that shows it working (after resize, too) which resembles the animation you have on your page a bit more (without pinning and starting when it comes into view) See the Pen b7c7ac5002ebc82e67ea6e7c5981e518 by akapowl (@akapowl) on CodePen Edit: Mistakes in your HTML markup were another thing that you were hinted on in that thread I mentioned above. That is something you can easily check on yourself, and should always be the first thing to consider, when something doesn't work as intended - at least they are for me, because typos simply just happen. 1 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 19, 2020 Author Share Posted October 19, 2020 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 Link to comment Share on other sites More sharing options...
mikel Posted October 19, 2020 Share Posted October 19, 2020 Hey @GeS, If you want to animate the sea, you need 'space' // css .img__sea { position: absolute; height:200%; top:-100%; } // js var tl = gsap.timeline({ scrollTrigger: { trigger: "section.about__container", scroller: "#viewport", scrub: 0.05, pin: true, start: () => "top 20%", end: () => "+=250%", }, }); tl.to(".img__sea", { yPercent: 50, ease:Power0.easeNone, }); See the Pen oNLLMWQ?editors=0110 by mikeK (@mikeK) on CodePen Happy sailing ... Mikel 3 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 20, 2020 Author Share Posted October 20, 2020 On 10/19/2020 at 5:21 PM, mikel said: Hey @GeS, If you want to animate the sea, you need 'space' // css .img__sea { position: absolute; height:200%; top:-100%; } // js var tl = gsap.timeline({ scrollTrigger: { trigger: "section.about__container", scroller: "#viewport", scrub: 0.05, pin: true, start: () => "top 20%", end: () => "+=250%", }, }); tl.to(".img__sea", { yPercent: 50, ease:Power0.easeNone, }); Happy sailing ... Mikel 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. Link to comment Share on other sites More sharing options...
akapowl Posted October 21, 2020 Share Posted October 21, 2020 Hey @GeS I think the animation on your page only shows the way it does initially because something else seems to be off somewhere. You'll notice, that you have a pin applied to the ScrollTrigger for your 'section.about__container' but nothing ever gets pinned. Thus, I think, something must be wrong in your code somewhere else initially. When you inspect that image of yours in dev-tools after resize, you'll notice, it is not being cropped, as you said, but it is being translated up on the y-axis instead. And that is actually, what it's supposed to do (since you tween from -50% to 50% on the y-axis). 3 Link to comment Share on other sites More sharing options...
akapowl Posted October 21, 2020 Share Posted October 21, 2020 I took some time, and fiddeled around with the code of your website example there, to see if I could find something, and I did. You are referencing trigger: "section.about__container", when you don't have a section with that class in your HTML. Instead you have a div with that class inside one section, so it should be this instead: trigger: "section .about__container", That is, what throws things off in the first place. If you change that, you'll see, the pinning will work, and you can start working on your animation to your liking from there. One more thing I noticed is, that in one place you load a js-file as a stylesheet like that. <link rel="stylesheet" href="https://unpkg.com/swiper@6.2.0/swiper-bundle.esm.browser.min.js"> That throws an error in your console. You should check on it. Happy adjusting Cheers, Paul 3 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 21, 2020 Author Share Posted October 21, 2020 thank you very much for your time. I will definitely check everything and follow your recommendations! thanks! 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