Lichay

I put it on pin one (refreshPriority: -1) and it doesn't work so i change it to the another with parallax-bg and on there it work nice but on my iPhone it isn't What do you mean create my own ScrollTrigger? and nah Angular render very fast everything work well without Gsap or parallax-bg in my project i try everything in my project and nothing work if i turn off all that container (parallaxContainer) my project work perfectly

I work hard for it and I get a result bug+low performance you can see it on that video from my iPhone I use refreshPriority and change some code to match so when i change screen it work after 10-70 sec it refresh or something from my computer it work well but from smart phone it isn't you can see the link to try yourself https://temp-89055.web.app and code her html https://github.com/lichaytiram/AngularRepo/blob/master/Projects/WayLife/src/app/app.component.html gsap https://github.com/lichaytiram/AngularRepo/blob/master/Projects/WayLife/src/app/app.component.ts under parallaxContainer only that function do all problem with gsap I don't know what to tell you anymore... it feel gsap broken

You can see it on that link moreover I open in on on my iPhone 125 pro max with bigger screen and it was smaller gap but still have gap you can watch it in your iPhone and see it slowlly the gap exist and with difference screen it change like you see in my website

I update my last comment ill send a video for it

Thanks it really work!

I update my example https://codepen.io/lichaytiram/pen/RwGvQbJ you can see this on same link if you look precise you can see he isn't start on same lines, and on big website it change with big diff. yes I talk about that that tread ill check last comment and hope it will work as I remember it was bug on angular and work on bad condition (not possible on big website) Ill check last comment and update you edit: update it really work encapsulation:ViewEncapsulation.None must it for use CSSRulePlugin in angular I am recommend to update it to tip page

I update it in my project but still have same problems and bugs it happened only inside that container with Gsap when I change screen size I am sure it bug with Gsap and no something else. The problem opacity stay 0 or X posotion start -=200% instead back to normal so it must be Gsap start points change for some reason. The second bug on cssruleplugin later ill find all information from my history page. This is right code? const totalScroll = 2600; gsap.to(".parallaxContainer", { scrollTrigger: { pin: ".parallaxContainer", end: `+=${totalScroll}` } }); gsap.to(".parallax-bg-up", { scrollTrigger: { trigger: ".parallaxContainer", start: 'top 70%', end: `+=${totalScroll} top`, scrub: true }, y: (i, target) => -totalScroll * target.dataset.speed, ease: "none" });

It because I create a full page that use Gsap and it doesn't work well because of that bug and yes I found another bug and ask for it early like 6 months ago and that issue isn't fix yet but it not important like this one. I can tell you about the second bug later or private but for now the main problem. Yes we don't need really markers for production I know it, I did it only for one reason to show you the bug that happened in my website. What it doing? just loss he start position with or without markers and I must fix that issue I can't upload my real website like that. yes you are right greensock good library and my problem not easy to fix but on real word use on iPhone and change from height to width it very basic stuff and any library must support this basic stuff. You can see that problem without markers on my real project website https://temp-89055.web.app code https://github.com/lichaytiram/AngularRepo/tree/master/Projects/WayLife/src/app some element from parallaxContainer is gone and stay with opacity 0 after change look at smartphone (height to width and back - you can see what I mean on video above)

it not possible? Because it feel so basic for that library must be a solution

I love it at first, but have too many bugs

plz help guys I really need your help I try to find solution on website and don't find nothing that really help.

pin with scrollTrigger kill the position to opacity When you scroll down it change to opacity to 0 and scroll up reback to 1 but the problem start when you change the screen size on smart phone to width instead height when it go down you need to change to width and return to height and it start the problem it do opacity not on same point and even don't do it a all I add a video to show my problem it very weird issue so plz help

where can I report about a bug?

When I change my screen size the element change his position for no reason if I create height of 600px it should inner element absolute to this height like 500px it should be inside and container because the container height 600px. moreover when I resize screen viewport to big it work well and when i change it to small it do problems what the reason the px still 600px and screen size not optional. Why it happened and how to fix it?

It work perfectly but I miss understanding something. on 5:00 he said^ on "first time on record the values", so why he get in second render value opacity 0 to 0 instead 0 to 1. because on first record it was 1. on my example he remember the value from first render and when you add 500px and after add -100px he take it from start (on first record as well) So my question is how it doesn't work the same on his example? edit: if he was use instead new TweenLite only one but use '.from' in this case it was work and back to 0 without immediateRender: false? my edit is use only for example understanding

first thank for helping. It work for easy example but on enhance example with some start & end properties it isn't work anymore and jump to start https://codepen.io/lichaytiram/pen/jOMXZZy

I am trying to add jumps between boxes every jump go some right but on the last step it should go 100px back but he go back 100px from start / I use this instructions and still go wrong how can I fix it? This is my code 'immediateRender: true' to keep it from last step of 400px right and go back 100px => box should be 300px https://codepen.io/lichaytiram/pen/jOMXZZy

it really so hard to implement? because it think it supposed to be inside GSAP scope/ it happend only with this pin and spacing and it very weird

and why I need to do it? without gsap or even with gsap but without pin it back to same viewport, but only with pin and show pinspacing area it go after by refreshing

https://codepen.io/lichaytiram/pen/rNMoxvM but you can't refresh it with codepen you need to run it with f5 for refresh

Gsap - pinspacing on reaction after refresh after I refresh page and on viewport show pinspacing the page go down to lower container How can I block this jumping after page refresh? I want it stay in same place like everything after refresh

lol Thanks

I mean if you can fix that problem with gsap. but never mind it work only add to body width: 100vw; and it work perfectly . Thanks you for helping and Good Day

Thanks . But it fix by top: calc(100vh + 300px); and if I want to use 1200px it be still a problem in my brain the height is const totalScroll = 1500; as px , but write calc(100vh + 300px); can be an issue for some cases Can you fix it from gsap or another way? I want it to be more clear