Jump to content
GreenSock

jackkemm

ShockinglyGreen
  • Posts

    43
  • Joined

  • Last visited

About jackkemm

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi @Rodrigo, Tested this out and works perfectly, thank you very much for the help! Jack
  2. 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: https://codepen.io/GreenSock/pen/KKpLdWW So I tried to do the same here but no luck sadly - I tried increasing the end value but no dice https://codepen.io/jackkemm/pen/abaLqrE Thanks, Jack
  3. 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
  4. 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: https://codepen.io/akapowl/pen/RwJwpvo 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: https://codepen.io/jackkemm/pen/wvEqVYE Any thoughts on this? Thanks, Jack
  5. 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: https://codepen.io/jackkemm/pen/bGxrNBj Thanks, Jack
  6. Hi @mvaneijgen, That's perfect, no need to calulate the height/width of the browser now 👌 Thanks for your help guys! Thanks, Jack
  7. Hi Cassie, I have done another example closer to what I am working on: https://codepen.io/jackkemm/pen/JjaNmEa 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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: https://codepen.io/jackkemm/pen/rNrPNVP Debug view for actual mobile testing: https://cdpn.io/pen/debug/rNrPNVP Here is the example without 'fix' and no .scroller: https://codepen.io/jackkemm/pen/mdjvdop Debug view for actual mobile testing: https://cdpn.io/pen/debug/mdjvdop Thanks in advance Jack
×