Start issue.

[tslevack]

i have a home page using a lot of GSAP but nothing i haven't done before many times.  The issue I am having is that 3 timeline events for divs about halfway down the page are messing up the start markers for another timeline at the bottom.  I have a div "hero2" that has 3 100 vh divs and i am trying to "squeeze" them together as user scrolls up.   i have a few sites where I do that exact same thing and it works fine, but on this page its throwing off any start point after these lines.   

 

tlHero2Pin.to(".h2slide1", {

  marginTop:"-20%",

  duration: 5,

});

tlHero2Pin.to(".h2slide2", {

marginTop:"-30%",

  duration: 5,

}, 0);

tlHero2Pin.to(".h2slide3", {

marginTop:"-20%",

  duration: 5,

}, 0);

 

whats really strange, if i resize the browser window at all, the start marker for the other timelines snap right into place.  Ive attached my java for this page (i add cdn elsewhere).  the page is built in Elementor so i cannot easily load to codepen.  

 

any assistance would be greatly appreciated.   I guess Im going to rebuild the page piece by piece and see if there is any reason why this is happening.  I have used marginTop in a lot of timelines and never had it affected other timelines.   

 

Harris Home page.js

[GSAP Helper]

By animating the marginTop, you're essentially changing the total scroll height of the page, which ScrollTrigger calculates on page load (and page resize/ScrollTrigger.refresh()). This will throw off any calculations that happen below that. You could try animating from yPercent: 20 to give it a similar effect, (you'd want to manually add your margins before hand).

 

That said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[tslevack]

Thanks that makes sense.  I will try the y percent and play around with other options to achieve the effect.  Confirming that the issue was the margin top was the answer I needed.  I went back and reviewed previous projects that  i have adjusted margin top before and I was moving things inside a larger div that did not change the height because of the movement.   I already know how i can fix this on current page.  

 

THANKS!!!