pinned item ignores margin placed

[IndM]

It seems that the width of the pinned-item is wrong due the margin being placed on it. While the pinned-spacer is showing this correctly.
The pinning happens on the text.

Can't figure out why its not working correctly

See the Pen wvRdvOO by indy-meermans (@indy-meermans) on CodePen

Edited September 15, 2023 by IndM

[GSAP Helper]

Hi there!

Can you maybe explain what it is your example isn't doing vs what is should do? Details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

[IndM]

topic has been adjusted, the fix is to wrap the div where the margin is being applied to. But I still don't get why the pinned-spacer is showing it correctly, but the element not.

Edited September 15, 2023 by IndM

[Rodrigo]

Hi,

 

I read this a few times and had a look at the codepen, but I'm still a bit lost about what the issue is here.

 

The few advice I can offer is to never use margin/padding or anything else that changes the vertical position of an element that triggers a ScrollTrigger instance, that could cause some unexpected behaviour.

 

Another thing you could try is to use immediateRender: false in your ScrollTrigger confiuration object:

scrollTrigger: {
  ...
  immediateRender: false,
  ...
}

If you keep having issues, please be super specific about what is not working and how we can see that in your codepen demo.

 

Hopefully this helps.

Happy Tweening!

[IndM]

Hi @Rodrigo, sorry for not a clear question.

The issue is about the div animation-pinned-text. There is a margin being applied to that div.  If you inspect it with the developer tools, you can see that the div around it, placed by the pin-spacer. Show that margin correctly that is being applied to the div animation-pinned-text. But when you inspect the div animation-pinned-text, you can see that that div ignores the spacing being applied to the incorrect width being applied to.

I know that the fix is putting a div arround it and place the trigger on that element, but I don't get the issue I mentioned above.

[Rodrigo]

Hi,

 

I'm not 100% sure of what's the issue here. In terms of the code you have in your example (HTML/CSS/JS) everything is working the way is supposed to, so clearly you have this code in place but are expecting a different outcome.

 

It would be super helpful if you could be as explicit as possible in terms of what you expect to happen and what's the desired result you want. If possible show a link with a website or a section of a website that does exactly what you're trying to do, because is not clear to me what you want to do and why this is not working the way you intend.

 

Happy Tweening!

[IndM]

8 hours ago, Rodrigo said:

Hi,

 

I'm not 100% sure of what's the issue here. In terms of the code you have in your example (HTML/CSS/JS) everything is working the way is supposed to, so clearly you have this code in place but are expecting a different outcome.

 

It would be super helpful if you could be as explicit as possible in terms of what you expect to happen and what's the desired result you want. If possible show a link with a website or a section of a website that does exactly what you're trying to do, because is not clear to me what you want to do and why this is not working the way you intend.

 

Happy Tweening!

Hi @Rodrigo,

I'm only able to upload 1 file due the upload limit, but if you can see here. The margins on the pin-spacer are being shown correct. If you inspect the the div under it, 'animation-pinned-text' you can see that the margins being ignored and the width is incorrect and won't fit inside the pin-spacer due the incorrect calculated width on that div.

Hope this will be more clear?

[IndM]

@Rodrigo i will just add a new comment with the other screenshot of the problem.

The problem is not about the animation or  a trigger being placed incorrectly but about those 2 divs. (the pin-spacer and animation-pinned-text). And why the original margin is being picked up correctly that is being placed on the div 'animation-pinned-text' by the pin-spacer but still is being wrong on the the div 'animation-pinned-text'.

'animation-pinned-text' should have the width of the blue section of the screenshot above (previous comment)
 

[Rodrigo]

Hi,

 

OK I gotcha now, sorry for being such a knuckle-head about it, the single functioning neuron must be spinning in the wrong direction

 

This is just about styles, since ScrollTrigger pin feature adds a position fixed to the elements being pinned, that takes the element out of the document's flow which creates this issue. You could just add some style to the <p> tag in your css:

.o2lab__col p {
  width: 50%;
}

Another option is to use padding instead of margins:

.mr-94 {
  padding-right: 94px;
}

.ml-94 {
  padding-left: 94px;
}

Hopefully this helps.

Happy Tweening!

[IndM]

@Rodrigo no worries! I have the same, always when someone comes with an answer, I'm always like "aaaahhh that makes sense".