Jump to content


  • Posts

  • Joined

  • Last visited

cbravo's Achievements



  1. @GreenSock This forum and the effort you and the team at Greensock put in responding in a timely manner with great answers to even the most edge-case / specific problems literally restores my faith in humanity. Thank you.
  2. Good morning! I am having two issues that I am hoping I can get some eyes on. In my codepen I have an animated section hooked up to scrollTrigger. I have 2 timelines one of them is nested in the other. In my actual use case the nested timeline has an important onUpdate function which draws my html5 canvas. If you scroll below the animated section and refresh the page (scroll position should be restored below the animation area) you will see that the progress on the timeline is reported as 0 before ScrollTrigger.refresh() and 1 afterwards AND my onUpdate function does not fire which means my canvas animation is not in the right state. 1. Why does ScrollTrigger.refresh() need to be called for progress to change? The animation looks as if progress is 1 but calling the progress getter returns 0. 2. If I call ScrollTrigger.refresh() and my timeline progress changes from 0 to 1 why doesn't my onUpdate fire? is there an alternative? 3. if attaching a ScrollTrigger moves the playhead should onUpdate fire? Note: You will need to fork this codepen and view directly and in debug mode so you can view without iframe and have the page load in a scrolled down position with scroll restoration to see the issues I am talking about. My actual use case is a bit more complicated than the pen because I am using react and each of the timelines (timeline1 and nestedTimeline) are located in different components like this: const parentTimeline = gsap.timeline(); const scrollTrigger = scrollTrigger.create({...}) // Here is where I would need to call the canvasDraw function or the onUpdate from the timeline inside <NestedComponent /> //so I cannot simply call those functions after setting up scrollTrigger as those are defined elsewhere. //Currently my workaround is to do something like this on the parent component after I create and refresh the ScrollTrigger: const nestedTimelime = parentTimeline.getChildren(false, false, true)[0] nestedTimelime.vars.onUpdate(...nestedTimelime.vars.onUpdateParams) <ParentComponent> // passing the parent timeline down so I can add more animations // NestedComponent contains the canvas and canvasDraw function I call on timeline update <NestedComponent parentTimeline={parentTimeline} /> </ParentComponent>
  3. @akapowlI think the crux of my problems are tied to me wanting to animate a fixed position element (The red circle) relative to elements in the normal flow of the document (the target headline). Let me try to explain again and maybe it will help clarify. So in simple terms my code is saying hey red circle when the target headline reaches 80% of the viewport you should be at 80% of the viewport too. All this does is animate the ball so that they both hit 80% of the viewport at the same time. The next part of the animation is the part that sticks with the headline by saying whentarget headline is at 20% you should be too. So in theory they should animate upwards together. I think that because the positioning of the red circle is affected by the mobile nav bar and Conversely, the mobile nav bar does NOT affect the positioning of target headline I think thats where my problem gets introduced. Something like that anyway... simplified pen without motion path: https://codepen.io/bravoclicks/pen/XWdNKPb clear as mud? lol
  4. Looks like its working in both my iPhoneX safari and Chrome! Good stuff @GreenSock and @akapowl! Hopefully this might have an affect on my original issues in this topic lol! Either way I am glad a solution for this issue was found!
  5. From what I can tell It stays in the wrong position until the next resize call... so I can scroll upwards and the animation will play out of position. (Mario will spin outside of the box while moving upwards). However if you scroll downward the mobile navbar starts to disappear causing a resize which fixes the misalignment.
  6. Yes @ZachSaucier iPhoneX is correct. I was able to reproduce on both chrome and safari. Its actually kinda tricky to get it to do it but you have to scroll up from the bottom and get the mobile bar too appear (it only shows up when you scroll upwards a certain amount fast enough) while Mario is at the bottom of his pinned container and he pops out. My gut feeling is that in these browsers where window.innerHeight changes when the bar appears and disappears BUT the content doesn't shift up and down along with that change of window.InnerHeight things can become misaligned but thats just a guess.
  7. @akapowl I just want to say how appreciative I am for you to take the time to give me a detailed response! Thank you for that! I think you are right... I think there is definitely more than one problem happening at the same time. 😓 It's hard to figure it out. I know for sure the mobile bar resize is one of the issues affecting this. Somewhat related (maybe?): I have been playing around some more and discovered that the mobile bar has affected pinned elements too @GreenSock. on the greensock promotional page for scrolltrigger I was able to get the Mario element to jump out of its container when the mobile bar appears / disappears:
  8. I have a question for you @akapowl if you don't mind. On the browser where BOTH values change...do you see the red circle "stick" to the target headline in the wrong place? and conversely if you have a browser where the values do not both change (maybe chrome on android?) do you see the same behavior?
  9. Okay @GreenSock I updated my codepen to show the height of a 100vh element vs window.innerHeight on the resize event. If you view the pen in debug mode you will see that they read different results (100vh will stay constant and innerHeight will change). I am not even sure if this is even related to reason I opened this topic but just in case it is I have included a screenshot or you can fork my pen and view it in debug mode to see for yourself. I tested this in chrome and safari on my iPhoneX. Can any android users out there confirm it is the same for them? To address your other point about waiting until after the scroll to fire the refresh of ScrollTrigger that is probably the correct behavior. But once that refresh is done shouldn't my dot be in the correct place? Maybe I need a good nights sleep to wrap my mind around it but its just not clicking for me why it would not refresh to the right location. Screenshot:
  10. Hey @GreenSock Are you sure that 100vh changes with the mobile nav bar? I know that window.innerHeight updates its value to reflect that there is less screen height when the mobile bar is showing but I think 100vh always is the height of the browser with all toolbars missing. This is by design to avoid the layout moving up and down as you scroll (https://developers.google.com/web/updates/2016/12/url-bar-resizing) This is a pretty old article so maybe things have changed. Ill try making a pen to make sure.
  11. @Visual-Q I believe it automatically recalculates on window reize as per the docs: I tweaked the codepen so that the dimensions it uses are no longer based on window.innerHeight and window.innerWidth but based on the dimensions of the 100vh and 100% container which should not change when the mobile nav bar is showing or not (I could be wrong but I am pretty sure 100vh ignores the mobile nav bar). With these new changes I am still seeing a jump that for the life a me I don't really understand. What I would be expecting is that the mobile navbar showing or hiding would cause a scrollTrigger refresh and the dot would be put back in the correct place.
  12. @akapowl @ZachSaucier That makes sense... but even with that in mind, looking at the code I have, shouldn't the red circle stick with the headline even when the mobile navbar showing OR hiding? I would expect that it should behave the same way on desktop and mobile with regards to positioning relative to the target headline since thats what the scrollTriggers are based on? here is an example of the misalignment on mobile I am seeing:
  13. I think the refreshing is expected but I am confused by why the refresh is causing a jump in position. It no longer is aligned with the title after the mobile bar appears / disappears and that is what is the part I am trying to get clarity on. Maybe it is behaving exactly as it should and I just don't understand what is happening.
  14. I have an iPhone X and I am seeing the jumping on chrome and safari on that device. I am just noticing that the debug link i provided is going to a page that says its expired. I am just finding out that you will need to fork my codepen and view it in your own debug mode as I am not a pro member and sharing debug mode links is only for pro members. The reason why I provided that link is so you can view the demo without an embedded iframe around it. That is the only way to actually trigger the mobile ios navbar coming in and out of the screen on scroll. Let me know if you need more clarity on reproduction steps. I attached a picture of the safari navbar just for clarity on what I mean
  15. Hello, I am seeing a problem that I am trying to understand a bit better and I hope you can shed some light. The codepen I have attached shows a red square that animates down the page and then hits a "target headline" and animates upward to stay with the headline. The problem is when you are viewing the pen on a mobile device you can see the square jumping out of position when the bottom navbar appears and disappears. In order to get the mobile bar to appear you need to view the codepen in debug mode which means you will need to fork the codepen and set it to debug mode on your mobile device to get rid of the iframe or else you will not be able to reproduce. Is this the expected behavior? Is the navbar triggering the scrolltrigger to refresh and somehow causing this?