cbravo

hello @Rodrigo I am a colleague of @iDVB and am very curious to learn a bit more of some alternative approaches to working with GSAP in react. You said in your response "what I can tell you is that I never used an approach like this." Do you mean that you handle gsap animations in an entirely different way than what we have done? Would love to learn more about your approach! Thanks for your reply

@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.

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>

@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

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!

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.

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.

@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:

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?

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:

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.

@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.

@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:

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.

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

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?

Thank you so much @GreenSock for the detailed reply! This has me thinking...Is there a way that I could change how I setup the animations to side step this issue? Maybe if I create the scroll trigger separately and attach it to the timeline that already has animations? Also to give you more context this whole issue is a problem for me because during window resize I am destroying and resetting up the animations to make sure they are responsive. Thanks again C

I am having a problem with re-initializing animations. In the codepen you can see that I have a red box that follows some curvy path down toward a target headline. Once the red box hits the target headline it animates upwards along with the headline to appear sticky. During this sticky phase if you remove the animations and then re-add the animations the redbox is no longer in the right spot until you scroll once. Is there something I am doing wrong? Why is the red box not appearing alongside the headline after re-initializing? If any more details or clarifications are needed I am happy to provide!

@GreenSock I am not sure why but I am having trouble adding the codepen using the normal method so ill just paste it directly here and in my original post. https://codesandbox.io/s/shy-darkness-4mxjp It seems like it runs okay at first but as I am moving it around the performance gets worse and worse.

I am hoping to get an opinion on a technique I am using on a project where I am trying to animate an object down the page as the user scrolls down. The circle element is in a fixed div that takes up the entire viewport and just moves around inside that div while the rest of the site is scrolled. (see image below) I am breaking up each part of the animation into their own gsap tweens like so // Animate to heading2 gsap.to('#circle', { motionPath: { path: (...curvy path to target), }, scrollTrigger: { trigger: '#heading2', start: 'top bottom', end: 'center 80%', scrub: true, }, }) // animate upwards at the same rate as scrolling gsap.to('#circle', { immediateRender: false, y: window.height * 0.2, scrollTrigger: { trigger: '#heading2', start: 'center 80%-=1px', end: 'center 20%', scrub: true, }, }) // once you reach the 20% from the top of the screen // animate towards heading3 // finish when heading3 is at 70% of the screen height. gsap.to('#circle', { immediateRender: false, ease: 'none', motionPath: { path: (...curvy path to target), }, scrollTrigger: { trigger: '#heading2', endTrigger: '#heading3', start: 'center 20%-=1px', end: 'center 70%', scrub: true, }, }) I am seeing major memory issues on the site and animations chugging like crazy and I am wondering if this technique is the cause of the performance issues. Does anyone have any thoughts or a better way to accomplish this? Codepen: https://codesandbox.io/s/shy-darkness-4mxjp Image Steps: 1. animate circle on curved path towards 'heading2' 2. animate circle upwards with 'heading2' as the user scrolls down so that the circle appears behind 'heading2' as it moves up the page. 3. Once the circle reaches to 20% mark of the top of the page animate it towards heading3

That did fix the problem! But you have me thinking about alternative approaches. If what I am doing is not advisable I am wondering though how you would use scrolltrigger to have a single element follow the user down the page and interact with different elements as the user scrolls down the page. Picture a long scroll page with images alternating on both the left and right of the screen. What I would want is to have an element, a circle in this case, move left and right behind the images as the user scrolls down the page. Kind of like my codepen only with several more elements. Since I don't know the distance between the elements vertically I figured I would use multiple nested scrolltriggers but you are saying that is not advisable. Any thoughts on an alternative? Does that make sense?

I am having some problems chaining together two animations of the same element that both have a scrolltrigger on them. The effect I am trying to go for is I want the circle to animate downwards and meet the blue div as it scrolls into the viewport and then animate upwards once it reaches a certain point in the viewport. it seems that chaining the animations behaves differently when there is a scrollTrigger vs when there is not. Without a scrolltrigger, the sphere animates as expected. It stars at y:0 moves down 300 pixels...and then back up. But with the scroll triggers there is a jump where the second animation is animating from the initial position starting at Y:0 moving down 300 pixels jumping back up to Y:0 and then moving up 300pixels. Am i doing something wrong? https://codesandbox.io/s/circle-to-image-jtye8 side note: it seems to work once hot reload takes effect