jackkemm

Hi @Rodrigo,

Tested this out and works perfectly, thank you very much for the help!

Jack

Hi @Rodrigo,

Sorry I have forked your example and updated it to use the layered pinning to best show below.

Removing the pinSpacing is to get this effect where the next section overlays the previous one:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

So I tried to do the same here but no luck sadly - I tried increasing the end value but no dice

See the Pen abaLqrE by jackkemm (@jackkemm) on CodePen

Thanks,
Jack

Hi @Rodrigo,

This is amazing. I think I got stuck in a rut and went way off-piste lol.

How would I account for the layered pinning here though? And pin long enough to see all the text?

I have added in the layered pinning check pinSpacing: index === sections.length - 1 to remove the pin spacing from all but the last one. But this prevents the items from being visible now 😕

Thanks,

Jack

Hi there,

I am using the layered pinning effect for some sections, but have run into an issue with my text overlay animation when trying to delay the pins from moving on.

I used this example which sets an end value on the ScrollTrigger, and adds a margin to offset the pins I assume:

See the Pen RwJwpvo by akapowl (@akapowl) on CodePen

For my animation to work, the layered pinning works perfectly, but i'm not 100% sure with this offset to allow for the delay, how to make my overlay text animate in & out correctly.

The idea is it scrolls up into view from 0 to 1 opacity, then continues off back to 0 opacity, but the positioning looks way off, and it's super fast.

There is also the need for it to be adaptable as there can be more than one content section within a pin - this I can work out i'm sure once I have figured out the correct spacing/offset.

I have attached a simple example built around it being used as a module/block to show where I am at with it.

Here is an example of what I managed to do without layering the pins which works how i want it to - the image container is pinned while the text scrolls naturally over the top:

See the Pen wvEqVYE by jackkemm (@jackkemm) on CodePen

Any thoughts on this?

Thanks,

Jack

See the Pen gOdxJgZ by jackkemm (@jackkemm) on CodePen

Hi @Bahaa,

I had a go at your code following on from what @GSAP Helper said about the use of fromTo().

To animate, there needs to be a from value, so I am just using the current innerText of the caption div/span to give it a place to animate from.

Also to note, your captions were all the same too so I added a number to them to visually show they're changing too.

See below:

See the Pen bGxrNBj by jackkemm (@jackkemm) on CodePen

Thanks,

Jack

Hi @mvaneijgen,

That's perfect, no need to calulate the height/width of the browser now 👌

Thanks for your help guys!

Thanks,

Jack

Hi Cassie,

I have done another example closer to what I am working on:

See the Pen JjaNmEa by jackkemm (@jackkemm) on CodePen

I tried invalidate()previously, but I was setting the original transform for the text elements in CSS rather than using a fromTo in my timeline which was breaking the animation when triggering it again🤦‍♂️

Looks like that was the answer after all!

Thanks guys.

Jack

Hi @mvaneijgen thanks for the answer.

I understand that thought you have about resizing, but in my case I would like to make this work flawlessly if a user does decide to resize so the animation works just as good.

I have used gsap.matchMedia() before, but in this instance I am updating the value on resize.

I plan to change the values on resize so there's no defined value to be within a break point (sorry Codepen was a bad example in the end lol). Have updated the Codepen to show better what I am after.

The values will be based on window.innerWidth for example and naturally these update on resize.

Thanks,

Jack

Hi there,

I am playing around with an animation for a menu takeover and was wondering about responsive function based values in a timeline? I am trying to update values being passed to a timeline based on the browser size when a user resizes their browser.

I have seen this but can't see it working with media queries/dynamic values:

I have tried this using a window.matchMedia within the function but understandably from what I have read elsewhere, GSAP stores the initial value on the first run for performance?

There are two other options I tried... updating a variable on resize and doing x: () => movement to get the new value, or updating a CSS custom property on resize and trying to use that too, none of which work.

The values are expected to change when the user resizes the browser be it when the timeline is at the beginning or end so ideally I need to be able to update these dynamically.

I have set up a basic Codepen of something similar to the route I am going down. I was wondering if there's a simple way to update these values? Scroll trigger has invalidate on refresh, I was thinking there may be something similar for timelines?

Any help on this would be amazing!

Thanks,

Jack

See the Pen gOdWReX by jackkemm (@jackkemm) on CodePen

Hi both,

Thanks for the replies!

Hi @Rodrigo, in regards to normalizeScroll, I have tested on Codepen numerous times with minimal set ups and it all works fine. However, in a site I am buildig it does tend to lag noticeably on mobile, and the main feature I am after, stopping the address bar from shrinking isn't always consistent, but as I've seen in previous forums, using normalizeScroll isn't the answer for everyone!

Hi @GreenSock, yes 100% does clarify thank you! I plan to keep testing on future projects and hopefully get it working more consistently on mobile devices!

Thanks,

Jack

Hi there,

I am wondering if there's a way to make ScrollSmoother work with the iOS Safari resize trick here https://greensock.com/docs/v3/HelperFunctions#scrollResize

I noticed ScrollSmoother adds a height to the body which is how the scrolling works I assume? But in my case I am wanting to change the scrolling window to be a custom div on mobile to prevent the browser resize from occuring.

I have tried normalizeScroll but it's not so performant for our use case so was want to do the old school way.

In something like Lenis, you can decide the wrapper which has the overflow so it's pretty simple to choose what the target div is to scroll on.

In the attached Codepen, I have it set up to use the custom div by default, but in practise I will be using ScrollTrigger.isTouch to be able to use work out whether it is a touch device or not to use the default set up or the custom div set up.

If anyone can shed some light on this it would be much appreciated.

Thanks in advance.

Jack

See the Pen vYzyryK by jackkemm (@jackkemm) on CodePen

Hi @GreenSock,

Thanks for looking at that so quickly!

Can confirm that has made it 10 times bettere thank you 💪

I will drop the temporary fix in for now.

How often do you update the packages?

Thanks,

Jack

Hi there, is there any way to hide height jump when the accordion opens/closes?

One of our clients has accordions at the bottom of a page and if you're right at the bottom and open/close the accordion, the height resize is very obvious and doesn't look too appealing.

I looked at the Codepen above and it is a good example of what happens if you're at the bottom.

Thanks in advance

Jack

Me again...

Did some more digging and turns out setting pinType: 'fixed' in my use case done the trick 👌

Found it here

So smooth now!

Thanks,

Jack

Hi there,

Looking to restart this as I have gone for alternative solution and almost there, I think it's just a scroll syncing issue.

I have opted to use Lenis for the smooth scrolling now due to us having many accordions on the site, the height being added to the body is causing unwanted jumping on open close.

I have also now opted to prevent the address bar on mobile devices from shrinking by using this helper https://greensock.com/docs/v3/HelperFunctions#scrollResize - in our case the normalizeScroll feature just wasn't working for us.

Because I am doing the above, I need to pass a .scroller to the ScrollTrigger's I am creating which is the main #viewport, and then need to pass the wrapper and its content to Lenis. I have followed the docs and seen numerous examples, desktop works as expected, no jumping. Checking on mobile, the pinned sections and their text are jumping all over and wondering if there's a syncing issue I may have missed?

I can also confirm if I don't try to prevent the address bar from hiding it works fine, but I am back to square one with the mobile issue.

Here is the jittery example with mobile address bar 'fix' & .scroller:

See the Pen rNrPNVP by jackkemm (@jackkemm) on CodePen

Debug view for actual mobile testing: https://cdpn.io/pen/debug/rNrPNVP

Here is the example without 'fix' and no .scroller:

See the Pen mdjvdop by jackkemm (@jackkemm) on CodePen

Debug view for actual mobile testing: https://cdpn.io/pen/debug/mdjvdop

Thanks in advance

Jack

Hi Cassie,

Fully understand that! It can be a massive pain to try combat I saw you guys mentioned it in the docs.

I am doing numerous pinned sections, so the normalizeScroll and ignoreMobileResize were seemingly the answer as there is more shifiting without them due to the address bar resizing, but still not quite right.

Thanks for looking into it. It happens that sometimes the normalizeScroll addition isn't always 100% perfect as the address bar may still shrink when it starts jittering.

Thanks,

Jack

Hi Rodrigo,

Sadly that'sa not massively helped. I am still seeing jumping in the codepen, and in the website I am building.

Just to note I am using the latest verion of GSAP in both too.

Thanks,
Jack

Hi Rodrigo,

Thanks for the reply!

Okay noted, so in theory either place should be fine.

In the attached example I am doing it via ScrollTrigger and have commented the ScrollSmoother variation out. The Codepen is very stripped back, and it's not as obvious as on the full website I am building, but you can see slight jittering, which is much more obvious on the website I am buidling.

See the Pen wvxmrMV by jackkemm (@jackkemm) on CodePen

I can mainly replicate when I scroll up and down a few times, it seems it can take some time for it to catch up. Not sure if this is an issue too, but in the example the markers are jumping around a lot too.

In terms of devices, the main place I have found the biggest issue as I know it is the biggest pain, an iPhone (I am using a 12) using Safari 🥲

The normalizeScroll and ignoreMobileResize features are a great idea so would love to use them!

Thanks,

Jack

Hi there,

I am looking for a recomendation.

In the docs, both normalizeScroll & ignoreMobileResize are mentioned for both ScrollTrigger and ScrollSmoother. I am using both on a site and was wondering where would be best to set them, for either ScrollTrigger or ScrollSmoother.

I have tested in both scenarios and they seemingly work better in one than the other. There are cases when it's set on ScrollSmoother and the screen may jump a little, or in ScrollTrigger the address bar can still hide/show.

Not sure if there's a best practise for this?

Thanks in advance.

Jack

Morning Rodrigo,

What you sent worked like a charm.  I tweaked it a little using a setTimeout in my project as there was still a slight jump, but the additions you made is making sure I get to the right positions before enabling/disabling the ScrollTrigger.

Thanks again!

Jack

Hi Rodrigo,

Sorry about that, will remember for next time!

Thanks for the solution. I will have a look and see what you've done and go from there.

Will get back to you when i'm happy

Thanks again!

Jack

Hi Rodrigo,

Was quicker than expected to set up

See the Pen a12381251fdbd3eeb29dfa765dc04606 by jackkemm (@jackkemm) on CodePen

If you scroll down to the the blue panel and click the trigger button, I am creating the ScrollTrigger. There is then a close button which takes you back to the start and disables the ScrollTrigger (removing the pin spacer div etc).

So everything seems to work fine on initial trigger, then if you scroll down when the ScrollTrigger is disabled after close and trigger it again, it scrolls back into place and then jumps slightly after the ScrollTrigger has been re-enabled.

It looks fine if it's lined up perfectly when triggering, the issues seem to arise if the div is not aligned when triggering.

My version on the site I am building jumps too but then scrolls back into place after, maybe because I am using ScrollSmoother here too - but this still gives a good understanding of the issue I am having.

Hope this gives you a better understanding!

Thanks,

Jack

Hi Rodrigo,

Thanks for the response.

I will try and set up a simplified Codepen today to hopefully get a better understanding.

I appreciate the idea there. If setting pinSpacing: false, how would I account for the scrolling space which pinSpacing cleverly fixes?

Anyway, the above question may be answered when I get a Codepen set up.

Please bare with and I will post the link in here!

Thanks,

Jack

Hi there,

I am looking for an opinion on some ScrollTrigger functionality.

I am creating a horizontal timeline which I don't want active until a user clicks on a button to make it active - this timeline could have many years and I only want it to work if a user interacts.

The issue I am having is creating the ScrollTrigger on click, there is a layout shift (to be expected).

There is a starting/intro panel where the button is which is 100vh/100vw and was going to clone this to act as an overlay until the ScrollTrigger has been created to hide the layout shift, but not sure this is a suitable solution.

I tried pairing this with enable/disable, but on load the pinSpacing exists which isn't what I want when I need it to be disabled, but also the pin divs gets added/removed too which also causes another layout shift (again to be expected).

Now I can go for the panel overlay route to hide the creating/shifting until it's ready, but I was wondering if having my scrollable content in a modal which only appears when the user clicks is a better solution. I see there is a .scroller property which may be handy, but not sure on the best way to use it in a modal for example. Are there any examples of how this can be implemented?

Thanks in advance!

Jack

Hi Rodrigo,

Thanks for the reply.

That was exactly what I was looking for! I have hard coded the ScrollTriggers refreshPriority for a page I have created myself, knowing the order and it worked like a dream.

I will look at automating an ID for these to determine their order of priority.

Thanks again,

Jack