ScrollTrigger adding inset to element

[Lovestoned]

ScrollTrigger adding inset style property to section element (trigger element). What is inset? Is it possible to prevent it? Why scrolltrigger adding this property? Because of my custom css?

 

thanks.

[tailbreezy]

Hello,

 

https://css-tricks.com/almanac/properties/i/inset/

 

My guess is your are pinning something. Don't worry about it, it just have some default values that will have no visible effect for you.

[GreenSock]

Yeah, just for the record, when pinning ScrollTrigger has to set the top, left, right, and bottom properties in order to ensure things are locked into place properly, but the browser combines them all into an "inset" like you're seeing. That's not actually what ScrollTrigger is setting internally but functionally it's just a different way of describing the same thing. 

[David Chavez]

Hello

 

I'm having a similar problem but here the inset values created by the pin-spacer are actually breaking the design, any clues on how to remove this inset?

Here is a demo of the site https://otra-9d8f98.webflow.io/info2-copy and the elements in question are the ones in magenta border

 

 

this is the JS code being used and in the bottom some images from the inspect

 

<script>
	gsap.registerPlugin(ScrollTrigger)
	  var actionContact = gsap.to('#sticky-contact', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });
	var actionServicios = gsap.to('#sticky-servicios', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });

  ScrollTrigger.create({
    trigger: ".banner-top",
    start: "bottom top",
    end: 'max',
    markers:true,
    pin: '#sticky-contact',
    pinSpacing: false,
    animation: actionContact,
    toggleActions: 'play reverse play reverse'
  });

	ScrollTrigger.create({
    trigger: ".banner-top",
    start: "bottom top",
    endTrigger: ".section-15",
    end: 'top bottom',
    markers:true,
    pin: '#sticky-servicios',
    pinSpacing: false,
    animation: actionServicios,
    toggleActions: 'play reverse play reverse'
  });

</script>

 

 

Edited December 14, 2022 by David Chavez
deleted an extra image that was not needed

[GSAP Helper]

Hm, I looked at your site and it is not clear to me what you think the problem is. Can you please be very specific about what you think is supposed to happen (but isn't happening)? Why do you think "inset" is the problem? 

 

It's super difficult to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue in the simplest way possible? 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[David Chavez]

Okay, sorry for not being clear, I'll try to be concise

I couldn't replicate the problem in codepen (it works as expected)

See the Pen zYaVQKJ by ATOMICHAVEZ (@ATOMICHAVEZ) on CodePen

The problem in the live site is that the two elements that have the "pin" applied get wrapped in a pin-spacer with top inset of 120px and 240px respectively. I don't understand where these insets come from, as you can see in the image below the elements get shifted downwards because of this and is not the expected behavior

 

 

 

[GreenSock]

Hm, it's pretty tough to diagnose if you can't provide a CodePen that illustrates the issue, but my guess is that you're lazy-loading an image (or something) higher up on the page so that when the page's "load" event fires and ScrollTrigger.refresh() is called (automatically), it calculates the start/end positions based on the DOM positioning at that point and then later you've got something (like an image loading) that shifts things down. 

 

Again, I'm totally guessing here. If you can provide something that's editable and reproduces the issue (hopefully in a very minimal way), that'll go a long way to getting your question answered. We'd love to help...but our hands are tied at this point.

 

Maybe try calling ScrollTrigger.refresh() when you know for sure that the DOM/layout is settled. Just to experiment (NOT a final solution), try calling it after a few seconds just to see if it resolves things: 

setTimeout(() => ScrollTrigger.refresh(), 2000);

🤷‍♂️