IndM Posted September 15 Share Posted September 15 (edited) 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 by IndM Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 15 Share Posted September 15 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" Link to comment Share on other sites More sharing options...
IndM Posted September 15 Author Share Posted September 15 (edited) 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 by IndM Link to comment Share on other sites More sharing options...
Rodrigo Posted September 15 Share Posted September 15 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! Link to comment Share on other sites More sharing options...
IndM Posted September 18 Author Share Posted September 18 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted September 18 Share Posted September 18 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! Link to comment Share on other sites More sharing options...
IndM Posted September 19 Author Share Posted September 19 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? Link to comment Share on other sites More sharing options...
IndM Posted September 19 Author Share Posted September 19 @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) Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 19 Solution Share Posted September 19 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! 1 Link to comment Share on other sites More sharing options...
IndM Posted September 20 Author Share Posted September 20 @Rodrigo no worries! I have the same, always when someone comes with an answer, I'm always like "aaaahhh that makes sense". 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now