Jump to content
Search Community

Pinning whole page creates problems on resize

the_gmo test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I'm trying to implement a complex animation, that should be animated on scroll before the page starts scrolling. 

The timeline should look like this, when users start scrolling: 

1) Increase the size of the background image, and at the same time, move each line of the headline to either side.

2) Once the first part of the animation is complete, increase the size of the hidden SVG to 50%

3) Keep increasing the size, and move it to the bottom/right of the section

I managed to get the animation exactly how I wanted, however I noticed now that this setup breaks the page after resize. After some resize events (the further and quicker the resize is, the more it likely it happens), it won't recalculate the height of the page (at least not correct), and the Slick-Slider does not resize until toggled.

 

I'm quite sure it is caused by pinning the container. If I don't pin the container, I cannot recreate this behaviour. But how else can I prevent the page from scrolling until the animation is complete?

 

 

Bonus question: It's not the first time my beloved slick slider causes problems when on the same site as my GSAP-animations. Can anyone recommend a slider plugin that plays well with GSAP, or would it be possible/more sensible to build sliders, using GSAP?

See the Pen yLxaayz by the_gmo (@the_gmo) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

Have you tried the same setup without the slider plugin? I removed that part of your JS and I don't see any issues.

 

Also you could try the latest beta versions of GSAP Core and ScrollTrigger and see how they work:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

You could try @PointC's content slider since it's built on top of GSAP it shouldn't have much issues:

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo,

thanks for your reply. You're right, it was (at least partly) the Slick Slider. Its height calculation does not catch up with GSAP in some cases. 

Unfortunately the slider you suggested does not match a couple of my requirements. 

However I managed to get it patched, by using the good old aspect ratio hack on the parent of the slider. This way, the resizing issue is solved and the last section is no longer being cut off.

  • Like 1
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...