celli

Thanks @OSUblake. I did some tests before creating this minimal codePen, and I still got the space at the bottom in Portrait Orientation, after rotating back from Landscape Orientation on an iPhone 13, after removing section by section of my scroll smoother content. The spacing issue was not present when I removed the scrollSmoother wrapper completely. https://codepen.io/celli/pen/WNdKdbd

yep, I w ill make a codePen, thanks!

Hi GSAP, I will add a codePen but just wanted to see if anyone has experienced this. It will be hard to tell on a codePen since it involves rotating an iPhone into landscape orientation and then back into portrait. Has anyone experienced a large gap at the bottom of the body/html after rotating a scrollSmoother page into landscape orientation and then back into portrait orientation ? (I see it clearly since my footer has a different background-color than my body) When I refresh in Portrait, the space goes away—it only appears after rotating the iPhone (latest iOS and iPhone 13) from landscape to portrait on a page using scrollSmoother.

wow, yes, that is awesome how that works! I'd want to turn it off on smaller screens, it doesn't seem to work well on my phone—but yes that works so well.

Thanks for the response. I see your points here!

Smooth Scroller is awesome thank you GSAP! Question: I have a set of 6 boxes that form two rows, and since there are two rows of elements I am trying to figure out if there is a way to control the position effects of smooth scroller when we are scrolling back up. When we scroll down it looks perfect, but since we have two rows, when we scroll back up the boxes collide since it is using the first box (top left) as the first box to stagger. On the way back up it might be better to use the bottom right box, or to keep the boxes from overshooting their regular position when scrolling back up, if possible? I was also looking at the ability to use the onUpdate and getVelocity, and I see how we can control and clamp rotation values, but I was looking to see how we can use a similar effect to control opacity based on the position of the elements, not necessarily the velocity—is that possible?

Yes, that's exactly it. Thank you Jack. Why is the overwrite:true important in this case?

@OSUblake, yes I wouldn't want to reverse it when switching from nav item to nav item, but I would actually want to return it to it's starting position when I am not hovered over any nav items

I have a very simple line moving from under one navigation item to the next on the x axis on hover, and I do want it to return to it's initial start position when not hovered over any navigation items, like it is capable of doing now—but, the thing I am trying to figure out is how to get it to seamlessly move from under one nav item to the next when I move my mouse and hover over each of the buttons? Currently it returns (quickly) to it's start position before sliding to the appropriate nav item; and likely doing what it's supposed to do because the TL is reversing when I hover off each item—but I am trying to figure out a way to still get it to return there when I'm not hovered over any nav items, but also smoothly slide to each nav item position while hovering from nav item to nav item?

yes Jack, Thank you for the thoughtful explanation!

Hi Jack, Yes that's exactly what I was trying to achieve, amazing. Is there a reason I would use Flip.from on the first Flip and the Flip.fit to return it ? I see why it works, and your example is perfect, I am just trying to wrap my head around use cases. I was able to get it pretty close by using Flip.from on both, but not able to truly pull it off correctly without using Flip.fit to return the element back to it's original location correctly, so more understanding of that is really helpful for future use of GSAP Flip.

On the codePen only the second image from the top in the first column will click. I have two small issues that I am trying to wrap my head around: 1. when the full size element is clicked to return to it's thumbnail state, I can't seem to get the z-index to have an effect on top of my other flex columns 2. when the full size element is clicked it removes the thumbnail (while it is flipping) and then returns it to the document flow when the Flip ends and you can see the column items jump when it removes and then adds the element back These are probably simple mistakes on my part with using Flip, but I can't seem to figure out exactly how fix them

@PointC, Ahh I see the trick is to make the <a> tags inline-block ? Initially I was trying to animated the <a> tags but they do not animate, without that css!

Hi, I am trying to get my elements to stagger at the same rate, however since some of my elements are nested in an unordered list, those elements that are nested move 2x the amount, since they also take on the distance calculated by their parent. I am unable to change the markup since it is a navigation and the nested sub level navigation needs to stay where it is in the html markup. Is there a way to still have these elements stagger with the rest of my elements, while ending their x position 300px to the right, without factoring in the additional 300px from the parent? Currently the 'sub-lines' move too far to the right, since their new position also takes it's parent's tweened position into account.

Also, here is an unfinished codePen of what I was trying to accomplish with the subtle timing, using the solution. Thanks again, all of this is (as always) super helpful. https://codepen.io/celli/pen/GRMXNoz

Thanks for all the effort and knowledge here, it's very helpful !

Thanks PointC, Sorry I mis-typed about the position parameter at 1, yes I totally get that. So essentially because we are using 'call' instead of 'add' the call is not included in the overall length of 'time' of the master timeline ? And this way we can call this particular timeline instead of actually adding it to the overall time of the master timeline, is that correct ?

Thanks PointC, that does give the result I was looking for. What does the 'null' refer to in the code below, and I assume we are then specifying an exact time with the '1' that this will play for (in this case 1 second) ? call(otherTimeline, null, 1) The only thing I notice is in GSDev Tools the timeline is very long, and it's not really naturally looping, instead it's one very long timeline.

Hi PointC, thanks for the reply. Yes, I tried a negative repeatDelay before, and while it kinda works, it throws off the master timeline and doesn't play everything in sync as we get into more than 2 loops. It's basically that I have a timeline in the middle of my Mater Timeline that is playing past the last timeline. While each of it's elements are not visible anymore, they are still rotating (I am doing this to get a subtle, but important timing effect on the rotation in my actual project), and taking up time for the master timeline to calculate. What I would like to do is kill() the second timeline at a place within the master timeline, but I can't see a way to do that efficiently—and if I do do that then the timeline that has been killed is not available to play when the master timeline loops again. Maybe there is a way that I can restart the masterTime onComplete of my last timeline ? And control the master timeline restart from there ? (I edited the codePen with commented out code where you can see I try this, but it throws the master timeline's looping out of sync)

I have multiple timelines (4) in this codePen demo which all play consecutively from a master timeline. The second timeline has a tween that plays further than the end of the last timeline, so the repeat on the master timeline is waiting for the second timeline to end before repeating—in the case that I have I'd like to actually repeat my 'master' timeline either at a certain timestamp of the master timeline (at 4 seconds in this case) or somehow clear the second timeline at a certain point in the master, so that the master timeline can repeat directly at the end of my last timeline in the master so that the looping appears seamless (even though a hidden element is still rotating). I am sure there is a way to accomplish this, but I can't find a good way to do it—if anyone can shed some light that would be fantastic.

thanks, that's nice PointC!

yep, I see. That's a nice way of doing it. I think maybe the .9 might be looked into just incase there is an issue somewhere, I can always use a different number. Anyway, thanks so much for helping me through it!

Hi Cassie, yes, 0.1 seems to work actually—did you try .9 ? The boxes eventually skip (usually at the 7th or 8th slide)... let me know if you see that happening? I changed it on your forked codePen and I get the same result

I noticed one thing while inspecting and working with the demo — if I change the duration to something other than 1 (let's say .9) then the sync of the scrolling elements gets thrown off, you need to wait until the 7th or 8th element to scroll to see it. Is there a way to compensate for a duration other than 1 ? You will see in my codePen I made some adjustments.

Thank You Cassie! I totally missed that, thanks!