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

Hello, I decided to try add Barba JS into my project and got most things working as normal. On first load, everything is fine, but if I navigate from home to somewhere else, and back again, once I scroll to a pinned section, things get a little funky. The pinned section seems to pin okay, but on scroll it moves vertically and horizontally - I've left markers on for now. I can't create a simple CodePen as can't use Barba in it, but if you go here, https://ilimitado.studio/, then go to any other page and back to home again, when you scroll down and hit the horizontally pinned section, you'll see the weirdness first-hand. I've tried "anticipatePin: 1" and "invalidateOnRefresh: true" but no joy. In case it matters, I'm using GSAP 3.11.1 and am killing my ScrollTriggers (or so I think) using "ScrollTrigger.getAll().forEach(t => t.kill());" before reinitialising them - also tried "ScrollTrigger.killAll();" as seen it was added in the 3.11 release but still no luck. In Barbas once (on first page load) and beforeEnter (before the new view loads) I'm calling my custom JS in the exact same order/way - hence why I can't figure out what the difference is or why one jumps and one doesn't. P.S. I know you can't debug a project this size, but thought I'd post in case it's something daft I've done/missed. Thanks, Matthew

Awesome - you're a legend.?

Hi Cassie, Thanks for the quick reply. I still couldn't get it to work, but I've went ahead and set up a CodePen in the hope it makes a fix that bit easier. I currently have your JS in, and mine commented out just below. I'm assuming my CSS is preventing the first .project element from showing, but it looks like the JS isn't looping through as expected as the other three .project elements do still show. https://codepen.io/ilimitadostudio/pen/yLRNgrg Thanks, Matthew

Hello, I'll try keep this as short as possible... I've been working on this website, https://ilimitado.studio/, and am trying to add a simple ScrollTrigger animation to each project element - I've based my code off the CodePen above, but it's not quite working as expected. Here's my code: const projects = gsap.utils.toArray('.project'); const imageRevealWrapper = gsap.utils.toArray('.image-reveal_wrapper'); const imageRevealImage = gsap.utils.toArray('.image-reveal .image'); projects.forEach((project, i) => { const transitionOne = gsap.fromTo(imageRevealWrapper, {y: '30%', z: 0, rotationX: -45, opacity: 0}, {y: 0, z: 0, rotationX: 0, opacity: 1, duration: .9}); const transitionTwo = gsap.fromTo(imageRevealImage, {scale: 1.2}, {scale: 1, duration: 1.2, delay: .3}); ScrollTrigger.create({ scroller: '[data-scroll-container]', trigger: project, animation: transitionOne, once: true, ease: 'cubic-bezier(.435, .250, .150, .965)' }); ScrollTrigger.create({ scroller: '[data-scroll-container]', trigger: project, animation: transitionTwo, once: true, ease: 'cubic-bezier(.435, .250, .150, .965)' }); }); If you head to the above URL, I've left the effect in on the "Adele's Apothecary" project element so you can see the madness. Basically, the animation fires each and every time I reach a project, whereas I only want it to fire once per project. Thanks, Matthew

Many thanks for this @Rodrigo - let's just say I was concocting one heck of an over-engineered fix... Yeah, my live site is using the latest versions of both, that was just a CodePen I had been referencing.

Hello, I've implemented a variation of the above CodePen on a website, and although it functions well for the most part, there's two things I'd like to change, but am unsure how best to do so. 1. I'd like the first panel to be visible from the get go - I don't wish to scroll to the pinned section and then have it animate in. 2. I'd like the last panel to remain visible as I scroll away - I don't wish for the last panel to disappear as I scroll away. Thanks, Matthew

Hi again guys. Sorry for the delay in getting back to you all, was over in London at an event. Thanks for all the feedback, I was able to get the solution I wanted taking on board everything you's said. Thanks again!

Hello, I've been trying to recreate the hover effect shown here, https://tympanus.net/Development/ImageRevealHover/ (the text hover on "Effect 20" to be exact). I'm more or less there I think, however, because I'm using a much more recent version of GSAP, I decided to try and convert the demo code to the new syntax, and I'm wondering if perhaps I've made a blunder and that's why I'm facing an issue. Here's the code responsible for the effect; var characters = document.querySelectorAll('#company-logo_text .character'); const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2); function animateCharacters() { const setColour = character => gsap.set(character, { color: ['#FEFEFE', '#4B4E4B', '#F5CB5C'][parseInt(getRandomFloat(0, 3))], opacity: Math.round(Math.random()) === 0 ? 1 : 0 }); characters.forEach((character) => { gsap.to(character, { x: '0%', y: '0%', startAt: {x: `${getRandomFloat(-50, 50)}%`, y: `${getRandomFloat(-50, 50)}%`}, duration: .1, repeat: 3, onStart: () => setColour(character), onRepeat: () => setColour(character), onComplete: () => gsap.set(character, {color: '#4B4E4B', opacity: 1}), ease: Expo.easeOut }); }); } And here's it on the website I'm working on (hover on the text in the top left); https://ilimitado.studio/ The problem I'm having is that in the example, the letters only jump a small amount, whereas in mine they often jump off the screen. The only thing I've noticed is that in the demo, each letter is moved via "transform: matrix", whereas mine start with "transform: translate" and then on hover move via "transform: translate3d" - this is why I'm wondering if my code is incorrect. Let me know if you need me to create a CodePen or if you can see something daft I've done wrong. Thanks, Matthew

Cheers Jack, that's the fix I was looking for!

Hello, Just starting playing about with GSAP last weekend and so far so good... more or less. I've created a pretty basic loading animation (following an old YouTube tutorial), but I'm having a bit of bother with the .to, .from, .fromTo methods and am unsure which I should actually be using. The problem with what I've done as it stands is that on load the loader itself flickers. I know why it does it, I just don't know how to fix it. You can see the problem here, https://ilimitado.studio/. HTML <div id="loader_wrapper" class="fixed loader_wrapper"> <div id="loader" class="fixed loader"> </div> </div> SCSS .loader_wrapper { width: 100%; height: 100vh; background-color: $companyColourOne; z-index: 98; .loader { width: 12%; min-width: 120px; height: 36vh; <--- Issue (probs) top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: $companyColourSeven; z-index: 98; } } JS var loaderTimeline = gsap.timeline(); loaderTimeline.from('#loader', 1.2, { height: '0vh', y: '33vh', transformOrigin: '50% 100%', ease: Expo.easeInOut }); loaderTimeline.to('#loader', 1.2, { height: '0vh', y: '-33vh', transformOrigin: '50% -100%', ease: Expo.easeInOut }); So yeah, I did try playing about with the heights in the CSS, and the from and to methods, but the above is as good as I could get it. Apologies in advance if this question is poorly formulated... new here.? Thanks, Matthew