Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alguna

ScrollTrigger copy position of another element

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

I would like to copy the position of an element with another element while scrolling using scrolltrigger. When I use basic window onscroll position, this is not accurate because it does small 'jumps'. Do you have an idea how I could get the exact position of an element when scrolling in window view ?

 

Regards,

 

Olivier

Link to comment
Share on other sites

Hey there Alguna,

I'm afraid I don't know what you mean by 'jumps' - Would you be able to put together a minimal demo showing how you're currently attempting to get the element's position?

Link to comment
Share on other sites

Yeah, I'm having a really hard time understanding what you mean, @alguna - a minimal demo will go a long way to getting a solid answer. 

 

I wonder if it's a timing thing - have you tried just using an onUpdate in the ScrollTrigger instead of a window.onscroll? Generally it's not a good idea to listen for scroll events - they're not synchronized with screen repaints. Sometimes an onscroll will fire multiple times between screen repaints, so you might be wasting a lot of resources.  

Link to comment
Share on other sites

Hi, 

 

Thank you for your answer, here is a quick setup using the scroll event, but I'm sure I can achieve this with better performance using ScrollTrigger. For the demo, I use only one element, but on the final version I will use several elements, so performance will be an important point.

 

See the Pen PomWrwK by alguna (@alguna) on CodePen

 

With the ScrollTrigger I will be able to use it only when element is on screen, not doing calculation all the time.

 

Thanks in advance,

 

Link to comment
Share on other sites

This seems like it may be an engineering issue - can you help us understand WHY you're doing this? Sometimes people ask about how to do a particular thing but when we understand their reasoning, there's a much, much cleaner solution. 

  1. Is there a reason you can't just nest the elements such that they move together naturally in the document flow? That will certainly give you the best performance and minimal hassle.
  2. Will the element whose position is being copied move at all (other than scrolling)? In other words, can you assume it'll be static in the document flow or must you accommodate animation, for example? 

The way you're doing it is definitely very bad for performance, so we should be able to figure out a much better way once we understand your intent. 

Link to comment
Share on other sites

  • Solution

Here's one approach that should perform better if you truly cannot nest things more appropriately and you don't need to accommodate animation on the image:

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

  • Thanks 1
Link to comment
Share on other sites

Hi,

 

Thanks a lot for your answer, it will help me a lot. Indeed, I can't nest things as the end goal is to have elements on full size background canvas copying position of elements outside the canvas.

 

Thanks a lot @GreenSock 

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