Matthew Meaklim

Thanks guys, based on your answers I've come up with a solution.😁

Morning, Thanks all for the quick responses. I should have said, the issue happens on an ancient iPhone 7, iOS 15.8.1 (Safari and Chrome was all I tested) — and like you all say, doesn't happen on more recent devices/browsers. If I had to guess, I'd say it has something to do with that bottom bar hiding and showing, as on first scroll it works fine. Thanks, Matthew

Morning, I've created a simple scrolling gallery on a website, and it works well everywhere except mobile. I thought it was perhaps some sort of conflict with another lib in use on the dev site, however the issue persists in CodePen. When on mobile, iPhone to be precise, when I initially scroll through the gallery, everything is grand. However, if I scroll back and go to scroll through the gallery again, the final image seems to duplicate itself and shows twice (with the duplicated image overlapping and causing a bit of a mess). I've attached a screenshot of what I mean. Any advice appreciated. Thanks, Matthew

Hi @mvaneijgen, That's actually more advanced than what I need, but I can certainly work with it so thanks very much - and kudos to @alig01. Many thanks for the quick response.

Hello, Excuse the title, not sure how to describe what I'm after really. And apologies if this question has already been asked. I've set up a CodePen to assist... hopefully. What I want is to essentially have the ".revealer" div follow the cursor to reveal the text underneath. I can get the parent div to move about no problem (commented out JS), however I'd also like the child div ".content" to remain in place, else do the exact opposite of what the parent does so that it looks like it remains in place, e.g. if ".revealer" was translated 50px 50px, ".content" would be translated -50px -50px. Perhaps I'm way off with my thinking, but it my head it could work... Many thanks as always. Also, if it helps, the effect is similar to what's shown here, however I just want to reveal the child content, not show new content; http://minhpham.design/.

Hi Alexander, I just had a quick look at the website and it looks like the inline script in your second screenshot is being called prior (on line 1138 of the source code) to GSAP being loaded (on line 1348 of the source code). It's difficult to debug an entire site, but that's likely the problem. There does seem to be a custom script called on line 1369 of the source code, so you could try adding your "gsap.to" test to that file and see if that fixes your issue.

"Nested pinning is also not supported" - bingo, I had thought this. Seems I've got it doing what I want now - https://codepen.io/ilimitadostudio/full/qBQyeeN. Thanks for the pointers as always!

Hello, I have created a series of pinned sections using ScrollTrigger as shown here https://codepen.io/ilimitadostudio/full/qBQyeeN. As you can also see, I then tried to create a further pinned section inside section four - as you scroll to each piece of the text on the left, update the image on the right. However, although it seems to work okay on first scroll, when you get to the end it kinda freaks out and I am unsure why. Perhaps I'm overcomplicating things, so open to any suggestions on alternative ways to achieve the desired effect. As always, any help appreciated. P.S. I've the Lenis Scroll method commented out in case you're wondering what that code is up to. Thanks, Matthew

Hi again @mvaneijgen. Thanks for your advice. I think I've got it. If you guys can think of a more elegant solution, feel free to advise. Thanks again. https://codepen.io/ilimitadostudio/pen/NWEpwLy

Hi @mvaneijgen. The JavaScript works grand for me - see attached screenshot. The animation is all good, but I want to achieve it on scroll, hence why I'm using ScrollTrigger. If you go here, you'll see the animation working on load, and then here, you'll see it hooked to a pinned section - so this is simply the last thing I'd like to do.

Apologies for my poor explanation - posted late in the day. In it's most simple terms, the issue is that my code only shows the first word in each element, I need a way to reveal all words - ideally in a staggered fashion.

Hello, I managed to create a nice text reveal on scroll in a pinned section which I then wanted to recreate in a normal (not pinned) section. I thought it'd be fairly handy but I'm missing something. I've created a minimal demo here; https://codepen.io/ilimitadostudio/pen/NWEpwLy. The above does show each text element as I scroll to it, but I can't find a way to then get it to loop through each word. I thought a loop inside a loop would do the trick, but I wasn't able to get it to work. The only other way I managed ended up showing all text elements as soon as the first target was reached. As always, any help appreciated. Thanks, Matthew

I've managed to fix this by moving the reinitialization of things to Barba's afterEnter hook.

In case it's of relevance, this is how I set LocomotiveScroll/ScrollTrigger up. https://codepen.io/GreenSock/pen/ExPdqKy

Hi Rodrigo, Apologies, should have said that the section is only present from 1024px and up. I tried that but still not playing ball - assuming of course that creating a global variable called ctx, wrapping my pinned section in "ctx = gsap.context(() => { ... });", and then calling "ctx.kill()" beforeEnter is the correct implementation. By process of elimination, I was able to determine that this code "scroller.on('scroll', ScrollTrigger.update);" is what's making things work on first load. It is called again when moving between pages, but only seems to work correctly when you first land on the website. P.S. If I remove that line, I get the strange jumpy behaviour from the get go. Thanks, Matthew