fionchadd

Ah amazing, thank-you! I hoped I'd be missing something obvious

Hi there, I'm trying to build a grid of items and have an image display when each item is hovered and follow the mouse. I have it almost working, but sometimes some of the images aren't appearing centered on the cursor and I'm not sure why. This doesn't seem to happen all the time or with all the images but here's a screen recording of that codepen showing it happening: https://drive.google.com/file/d/1SLffibOCOd7ISCWE5dziqm2gs32h39eI/view?usp=sharing Do you have any idea why this is happening or how I can ensure the images are always centered on the cursor? Thanks! Hannah

HI Jack, That's exactly what I wanted, thank-you so much! I really appreciate it Hannah

Hi Rodrigo, Ahh amazing, thank-you for this! I definitely have a tendency to overcomplicate things unnecessarily This is great, thank-you so much. I pulled it into another pen and tried adding the additional elements, and realised that the issue is coming from trying to fade out the items that aren't being hovered. In this pen, for example, I've based it on your code but the issue in my previous pen is once again apparent: https://codepen.io/fionchadd/pen/mdKBwyP/438c486d2b953de9d2b7b63b31f04842 But I've narrowed down the problem which is great! I think there's a conflict between me saying "set all spans to be 0.16 opacity" and "set this span to be 1 opacity" at the same time and that's what's making it confused. This is the only line I've added to the code: .to("span", { color: "#ffffff", opacity: 0.16, }, "<") Is there a way to target the "span" elements that don't belong to the "artist" element that's been hovered? Kind of like the opposite of where you've written .to(overlays[i], { opacity: 1 }) which targets the overlay of the clicked item; I'd like to target the spans of all items *except* the hovered item. Or would I be better off toggling a class on the list on hover and fading out the other content with CSS? Thank-you so much! Hannah

Hi there, This is kind of a continuation of my previous post here - except now I have a different problem so I'm starting a different thread, I hope that's ok! I'm trying to redo the pen in my previous thread to use a single timeline which plays on mousein/focusin and reverses on mouseout/focusout, rather than having two separate timelines. I found an example by Blake in this thread: which I know is an old thread but the method seemed sound still? So I've used that method in the codepen I linked above. The problem I'm having is that the animation doesn't always reverse to its starting position, and I'm not really sure why. If you hover over different items for a while, sometimes when you hover-off the titles stay white, or go back to their starting colour but stay at 0.16 opacity. Originally I was changing the background colour of the body rather than fading in/out the overlays, and the colour would get stuck between the values - i switched to using different overlays instead which seems to have solved that problem, but I'm still struggling with the text colour/opacity. Is anyone able to identify why this is happening? Thank-you! Hannah

Carl's approach sounds better but I need to properly focus on the video and my brain's not in that headspace at the moment. I've just bought access to his creative coding pack

Ah thank-you! I've heard great things about Carl's tutorials so I will check this out I think I've fixed my issue!! If I pause the timeline that I *don't* want to run on mousein / mouseout, it seems to behave better. Revised codepen here: https://codepen.io/fionchadd/pen/YzvJWyy/0897d4e85c838cdb1bba34d82e7e8591

Hi there, I'm working on a hover effect at the moment and it's *almost* perfect, it's behaving exactly as I want *except* if you're hovering on an item and you quickly move your mouse off and then back onto the item, the image disappears while the rest of the hover state (background colour, opacity of other items etc) remains. I can't work out why this is happening but any advice would be greatly appreciated! Many thanks Hannah

And now it's a slot machine! https://codepen.io/fionchadd/pen/xxzdvNQ I had to do some quite heavy tinkering to select the active element - because the items loop round in a 3d circle there are two items in each wheel on the center point when the animation stops. But the one behind is *slightly* smaller so there's a small amount of the browser window where the front one is present and the back one isn't, so once I got the offset *just* right it worked! It feels like there should maybe be a better way to do that but I'm not clever enough to work out what it is.

Interestingly I was just playing with the scrub value and realising that was throwing the snap function further off the larger I made it, so I've tried calling it onScrubComplete instead which seems to be working better: https://codepen.io/fionchadd/pen/XWYRYwr

I think the onComplete property inside the snap Object is the same as onSnapComplete, right? I was trying to work out if there's a difference! Currently I'm using a snap object: Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required): onComplete [Function] - a function that should be called when snapping completes and I'm calling a function with onComplete inside the snap object, which sounds like it does the same thing as calling the function with onSnapComplete? Interesting idea to link it to progress of the animation, I'll give that a try! Thank-you

Hi there, I'm trying to build a kind of vertical-scrolling / slot-machine type animation. I've got the bones of it, it's rotating on scroll and snapping to the list items, which is what I want. What I'd like to do now is, when it's snapped to an item, give that item a class so I can style it differently. I've tried a workaround with an additional scroll-trigger event which fires on onComplete inside the snap object, which seems to work some of the time, but sometimes more than one item will be given the active class, or it won't properly remove the active class when I start scrolling again. I'm guessing more than one item is given the class because of the way I've wrapped the list items around back on themselves, so there are technically two items in the center. So I was wondering if it was possible to add a class to the snapped-to item instead of looking for the item in the center of the screen? I've read through all the docs on snapping but I can't work out if this is something that's possible. Thanks! Hannah

Hi Rodrigo, That's great, thank-you so much! Hannah

Hi there, I'm trying to modify the codepen above, which I found linked in a forum thread from earlier this year; to create a vertical scrolling slot-wheel type animation. I've got pretty close to what I want, and now I'm trying to use it with scrolltrigger rather than draggable: https://codepen.io/fionchadd/pen/eYKWYNm The trouble is, when I install ScrollTrigger, it says I need a newer version of GSAP core (at least 3.11), whereas the version in the original codepen is v3.6.1, and when i update the version of GSAP to the latest version the whole layout falls apart (in both codepens) and I'm not entirely sure why! It seems to be not adding the translate3D values to the items, but I can't work out why because I can't work out how they're being applied in the first place! If anyone can help me work out what's happening (or what's not happening that should be) I'd really appreciate it. Thanks! Hannah

I have answered my own question with help from this pen: https://codepen.io/creativeocean/pen/poRyMLX My final version is here: https://codepen.io/fionchadd/pen/ZEvQNrY/5d8f50c908370bc3c8681efcaea6d9dc Thanks so much for your help!

Hi Blake, Ahh this is great, thank-you, I did try manipulating timeline progress but I couldn't work out how to make that work. It seems like the same issue is happening as in my initial pen though - when the purple side is visible, dragging it down tilts it back and dragging up tilts it forward, whereas when the orange side is visible, dragging down tilts it forward and dragging up tilts it back (which is what I want). Is there a way to have the same Y-rotation behaviour regardless of the X-rotation? Thanks! Hannah

Hi there, I'm trying to recreate this effect https://codepen.io/fionchadd/pen/JjMoMBN/d660d22ce42eb5bc32f17b22e695f5a4 using GSAP so I can take advantage of the inertia effect and the nicer movement. I am almost there but I'm struggling with the up- and down- movement (rotationX). It works well when the front of the packshot is visible, but when the back is visible the mouse movements seem to be reversed, and scrolling down angles the packshot up rather than down. I'm not sure what to do about this because I'm not entirely sure why it's happening - I was hoping you might be able to explain what's going on, in the hope that that might help me solve the issue! Thanks Hannah

Hi Shaun, That's perfect, thanks so much! I was falling down on how to write the "top top+=" + (59*i) formula, this is a huge help Thanks again! Hannah

Hi there, I'm building a page at the moment which has sections with headers inside them, and I'd like to pin each header to the bottom of the previous header when the user scrolls down, with each header acting as a hotlink back to that section. I've been able to make this work by writing a different scroll-trigger for each section and manually changing the start point to accommodate the previous header, here: https://codepen.io/fionchadd/pen/zYPPjwK - so this is the end effect I'm after. But I'm thinking there's probably a 'better' way to write this so I'm not dependent on writing different triggers and changing the offset each time? Is there a way to say, for the trigger start point, "please find the position of the previous header and pin this item when it reaches the bottom of that header"? No worries if there isn't! (or if this is beyond the scope of your support) I just thought I'd ask Thanks! Hannah

Hi Blake, That's exactly what I'm trying to do! Thanks so much Hannah

Hi there I'm trying to build something at the moment and I can't get it working quite right. The desired behaviour is this: On page load, the first text section scrolls up over the top (red) section. This is done by reducing the margin at the top of the text section. Then as you continue to scroll down the page, the content of each subsequent section fades into view when it's in the viewport. Currently the content of subsequent sections is fading in much later than it should. I think what's happening is that ScrollTrigger is calculating the position of the rows before the initial scrolling animation, and then when the first section has scrolled up, it thinks the rows are in different places to where they are so they trigger much later. Is there a way to construct this so that ScrollTrigger fetches the row positions after the first animation has completed? I tried using ScrollTrigger.refresh() at the end of the loadingAnimation but that didn't seem to help. Any advice would be gratefully received! Thanks Hannah

Hi OSUBlake, Ah, thanks so much! This is really helpful and will definitely get me where I want to be. Thanks again! Hannah

Hi there, I'm trying to make a caterpillar which crawls along a leaf. I'm using MotionPath to move the caterpillar along the leaf, but what I would like to do is move it along the leaf in stages rather than all in one go. Is it possible to increment the start and end value for each repeat, in the way that I can for X values, for example? I tried this: .to(".body-outer", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 1], autoRotate: true, start: 0, end: 0.1, offsetX: "-=0", fromCurrent: true, relative: true, }, duration: 1, ease: "linear", stagger: 0.4, repeat: 10, },"<") and I've also tried this: .to(".body-outer", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 1], autoRotate: true, start: "+=0", end: "+=0.1", offsetX: "-=0", }, duration: 1, ease: "linear", stagger: 0.4, repeat: 10, },"<") but neither of them seem to work, the caterpillar is only travelling along 10% of the path at the moment, rather than travelling further along the path each time. Thanks! Hannah

Hi Cassie, Ah that's perfect, thanks so much for your help! Hannah

Hi there, I have another question about my tortoise I'm afraid! I'm trying to rewrite the current code to be better, as it's a bit of a mess at the moment, and I've run into an issue. When changing the colour of the shell, originally I had the shell colour change function inside the 'change input' function, which was working fine - you can see that in a pen here: https://codepen.io/fionchadd/pen/dyRrNKr What I'm trying to do now is set up the colour changes as timelines, and then start the relevant timeline when the input changes. That's in a codepen here: https://codepen.io/fionchadd/pen/WNOmROw The issue I'm having is that between certain colour changes, the shell changes back to a previous state rather than going from the current colour to the new colour, and I'm not sure why. For example, if you click 'multi' it changes to multicoloured, but if you then click 'green' it turns red before going green. If you then click 'multi' again it turns blue before going multicoloured. Am I doing something wrong in the way I'm calling the timelines? I tried using play(0) rather than restart() but it didn't seem to help. Thanks! Hannah