Jump to content
Search Community

fionchadd

Premium

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Posts posted by fionchadd

    Move images with mouse on hover

    in GSAP

    Posted

    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

    See the Pen NWOGGKE by fionchadd (@fionchadd) on CodePen

    Animation doesn't reverse to starting point

    in GSAP

    Posted

    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: 

    See the Pen 438c486d2b953de9d2b7b63b31f04842 by fionchadd (@fionchadd) on CodePen

     

     

    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

    Animation doesn't reverse to starting point

    in GSAP

    Posted

    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

    See the Pen 823258df262a67091e1ff841966b4098 by fionchadd (@fionchadd) on CodePen

    Animation on hover misbehaves when hovering quickly

    in GSAP

    Posted

    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

    See the Pen 3034dc262d70dee868e41adef613463a by fionchadd (@fionchadd) on CodePen

    ScrollTrigger snapping: add element to snapped-to item?

    in GSAP

    Posted

    And now it's a slot machine! 

    See the Pen xxzdvNQ by fionchadd (@fionchadd) on CodePen

     

     

    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. 

    ScrollTrigger snapping: add element to snapped-to item?

    in GSAP

    Posted

    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 :-) 

    ScrollTrigger snapping: add element to snapped-to item?

    in GSAP

    Posted

    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

    See the Pen yLEbpEo by fionchadd (@fionchadd) on CodePen

    3D carousel codepen not working with latest GSAP version

    in GSAP

    Posted

    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: 

    See the Pen eYKWYNm by fionchadd (@fionchadd) on CodePen

     

     

    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

    See the Pen mdROBXx by creativeocean (@creativeocean) on CodePen

    Using draggable on 3D object the mouse-direction reverses

    in GSAP

    Posted

    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

    Using draggable on 3D object the mouse-direction reverses

    in GSAP

    Posted

    Hi there, 

     

    I'm trying to recreate this effect 

    See the Pen d660d22ce42eb5bc32f17b22e695f5a4 by fionchadd (@fionchadd) on CodePen

     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

    See the Pen 74ed359c0d50969b634250cd2a3d67d9 by fionchadd (@fionchadd) on CodePen

    Pin element to the bottom of another element

    in GSAP

    Posted

    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: 

    See the Pen zYPPjwK by fionchadd (@fionchadd) on CodePen

      - 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

    See the Pen KKyyoae by fionchadd (@fionchadd) on CodePen

    ScrollTrigger refresh scroll positions after previous animation?

    in GSAP

    Posted

    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

    See the Pen dyVpWKz by fionchadd (@fionchadd) on CodePen

    Staggered moving along path / incremental end value for MotionPath

    in GSAP

    Posted

    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

    See the Pen OJjjpvp by fionchadd (@fionchadd) on CodePen

    GSAP timeline resets items to previous state before playing

    in GSAP

    Posted

    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: 

    See the Pen dyRrNKr by fionchadd (@fionchadd) on CodePen

     

     

    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: 

     

    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

    See the Pen WNOmROw by fionchadd (@fionchadd) on CodePen

1
2
Page 1 of 2  
×
×
  • Create New...