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!