Jump to content
Search Community

Positioning an element on scroll relative to another ( ScrollTrigger )

daniel.mt test
Moderator Tag

Recommended Posts

Hello . I'm trying to achieve a similar effect of scaling found here: 

See the Pen wvKwZXG by GreenSock (@GreenSock) on CodePen

 but with some slight changes. I'm trying to scale a position fixed div to another smaller one ( for short scaling the bigTile to smallTile ) . So far so good. The width / height is scaled perfectly and it works like a charm. But when I tried to alter the x/y of the fixed element I encountered various issues like: the positioning with the element is all wrong - the problem can be seen in the codepen, on resize it jumps out, on refresh it's not updated properly. I have the feeling that the way I'm updating x / y ( that works in my solution but not in codepen apparently ) it's all wrong . 

 

So the question: it's there any way to hijack those x/y values with the position of the small tile ( top / left ) ? 

See the Pen oNLPgee by vesemir (@vesemir) on CodePen

Link to comment
Share on other sites

Hey vesemir. As soon as there's a transform on your container element the element with position: fixed becomes like position: absolute... Are you sure you don't just need position: absolute? That would greatly simplify your calculations. You don't want to have to calculate positions every single time the user scrolls. 

 

If the element does act with position: fixed before the section is reached, it would likely make sense to change its positioning to absolute for the alignment to the small box. 

  • Thanks 1
Link to comment
Share on other sites

Brilliant . Apparently this solves part of my problem. 

 

Here is final solution:

See the Pen VwjGKzM by vesemir (@vesemir) on CodePen

 

One more question if I'm not too annoying. Any idea on how I could update my to / from based on my progress on resize ? Tried something on refresh but this doesn't count my progress and updates it only to the final position. 

 

Thanks again for your help. I don't know why I didn't thought on this from the beginning. 

Link to comment
Share on other sites

You have two options there:

  1. Use functional values for all of the properties that change. Make sure invalidateOnRefresh is true for the ScrollTrigger. Then in the refreshInit callback you recalculate the position data. 
  2. Just kill off the old tween and ScrollTrigger and rebuild them in the refreshInit.
  • Like 1
Link to comment
Share on other sites

Figured it out somehow. Ditched out the tween and used a timeline instead , managed to store the progress and send it to timeline. It's messy but it does his job . 

 

Here is the final solution for whoever is trying to achieve something similar:

 

See the Pen mdEGOGb by vesemir (@vesemir) on CodePen

 

I'll try to rewrite this mess but for now it works . 

 

Thanks a lot for your help.

 

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