Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About fionchadd

Profile Information

  • Gender
  • Location
    London, UK

fionchadd's Achievements

  1. 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!
  2. 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
  3. 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
  4. 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
  5. 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
  6. Hi Blake, That's exactly what I'm trying to do! Thanks so much Hannah
  7. 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
  8. Hi OSUBlake, Ah, thanks so much! This is really helpful and will definitely get me where I want to be. Thanks again! Hannah
  9. 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
  10. Hi Cassie, Ah that's perfect, thanks so much for your help! Hannah
  11. 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
  12. Hi OSUblake, Thank-you so much, this is *perfect*! And so much simpler than what I was trying to do. Thanks for the heads-up on getProperty as well! I'm very grateful Hannah
  13. Hi there, I'm trying to give my tortoise a hat using Draggable and I'm really struggling to get the behaviour I want. The ideal behaviour is that if the hat overlaps the dropzone (outlined in red) when the user releases the mouse, it snaps to the center of the dropzone. Otherwise it falls to the ground. Falling to the ground is working fine, but I can't get it to snap to the center of the dropzone. I found a few codepens / threads on the forums with similar requests, but they either use a left/top drag or absolute positioning; my elements are part of an SVG so I'm unable to use those methods. What I'm doing at the moment is getting the left and top position of the dropzone, then on drag end getting the left and top position of the hat, the distance between that and the dropzone, and the current X and Y values of the hat. Then I'm adding half of the distance to the current X and Y values and tweening to that. It seems to get fairly close on certain screen sizes, but it doesn't seem to be a responsive solution and although it is tweening, it doesn't seem to be tweening to the exact center of the dropzone. I realise this isn't really a "how do I use draggable" question so I totally understand if it's beyond the scope of support that you offer, but if you have any similar examples you can point me towards I'd be very grateful! Hannah
  14. Hi Jack, ah that’s amazing, thanks so much for the advice! I’m still pretty new to gsap so that’s super helpful to know. Also cant believe I found a real life bug lol, I was convinced I was doing something wrong 😅 thanks for your help! hannah
  15. Hi there, I'm trying to work with Draggable at the moment and I'm having an issue with the snap function. I'm trying to get the item to return to its original position after it's been thrown; currently the snap value seems to be affecting the X value but not the Y value and I'm not really sure why? Any advice you can give would be greatly appreciated! Thanks Hannah