Jump to content
Search Community

How do I make x: value change on resize?

kohlej test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello guys, 

I have two div: .box which is parent and .roller which is child.
.box has width of 50% while .roller has fixed width which is suppose to be bigger than .box.

As I scroll, I want the .roller to move to the left inside the .box and at the end point of trigger, .roller's right side should side with .box right side.
I got this working perfectly fine with my codepen example Demo 1, but I want it to work on resize. I tried using resize function but I dont know how to pass value...
I also tried to look into function-based values but couldnt find anything that would help me...

Any help is appreciated;

Demo 1 (Working example without resize)

See the Pen GRNKjWe by kohlej (@kohlej) on CodePen



Demo 2 (Not working example, trying to use resize function)

See the Pen PobYGeY?editors=0010 by kohlej (@kohlej) on CodePen

Link to comment
Share on other sites

  • Solution

Hey kohlej and thanks for the clear demo and your attempt at a solution! That's very helpful.

 

I recommend making use of the fact that ScrollTrigger can recalculate properties of your tween on resize so long as you tell it to using invalidateOnRefresh: true and a functional value for the property you want to change, like so:

See the Pen PobYWoO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

20 hours ago, ZachSaucier said:

Hey kohlej and thanks for the clear demo and your attempt at a solution! That's very helpful.

 

I recommend making use of the fact that ScrollTrigger can recalculate properties of your tween on resize so long as you tell it to using invalidateOnRefresh: true and a functional value for the property you want to change, like so:

 

 

Thanks Zach, this is exactly what I needed. 

You're very welcome for the demo, the effort you guys put to help users on this platform is incredible, I'm pretty sure that greensock's forum is most "efficient" in giving solutions and most active forum on the internet, and that is thanks to you and few more people here!

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