Jump to content
Search Community

ScrollTrigger refresh on resize?

Adam.shires test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hey Everyone,

 

Been scrathcing my head over this one and simply can't figure out how to implement ScrollTrigger rfresh(); to recalculate % start and end values on screen resize.

So in my demo there are two elements which on scroll reduce their widths from 50% - 0% in the left and right direction, Imagine two curtains opening.

Upon load, and with screen resize the two curtains both take up 50% of the viewport no problem, but if I resize after engaging the scrollTrigger the intial values of the 50% are remaining and the "curtains" overlap each other. As can be seen when scrolling and then resizing in the demo.

I believed this to be a simple fix with ScrollTrigger.refresh(); to recalculate but I feel like I'm missing something super obvious!

Sorry for the silly question I've been wracking my head over this one and have been staring at the screen for hours lol 😛 

See the Pen OJBaJKE by Geeza82 (@Geeza82) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

This is basically related to the units you're passing to GSAP. So right now you're passing a number 0, so GSAP says: "OK, you want me to tween the width of this element to 0 pixels" and GSAP, being an extremely good library, does exactly what you're asking. The problem is that you're basing your entire setup in percentage-based values. For that you have to be specific so GSAP knows you're intentions. Regardless of all the hard work putted into GSAP, the library still can't read minds ;).

 

This seems to work the way you intend:

walltl
  .to(".left-crunch", { width: "0%" })
  .to(".right-crunch", { width: "0%" }, 0);

Hopefully this helps.

Happy Tweening!

  • Like 3
  • Thanks 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...