Jump to content
Search Community

gsap animation replay with screen constriction

GeorgeErshov test
Moderator Tag

Recommended Posts

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/

 

61241483a0.png

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

 

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.

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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 :) 

  • Like 2
Link to comment
Share on other sites

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

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

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

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

@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.

 

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

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).

  • Like 3
Link to comment
Share on other sites

 

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...