Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

234 profile views

NickWoodward's Achievements

  1. Haha, nice - this actually fixed a bug I couldn't understand when re-rendering the page with a filter. Was like next on my list to fix
  2. Ah - a hang over from when I wasn't using ScrollTrigger at all - But yeah I probably wouldn't have thought to change it, so thanks! Also didn't know I'd have to call `refresh()` - nice to see it in an example of mine, makes it less likely I'll forget it in 30 seconds time! No worries, if it helps I can make more threads 😄 Perfect, thanks! Out of interest, are you able to leave out the trigger option from the scrolltrigger instance because it defaults to `document.body`, or is there some other reason? Also, if you don't mind, is there a general rule on when it's a good idea to kill animations? I have to admit I don't think I give anywhere near enough thought to it...
  3. So I've tried to make a codepen that staggers in the first visible items on screen, and then when you get to the bottom of the page it continues to animate in the new elements added to the DOM. Initially I tried to use ScrollTrigger without the `batch` method, clearing the timeline and replaying it when new elements were added - with a bit of success, but it was janky (I've left the code in for your entertainment 😄). Anyway, it seems to work well using ScrollTrigger.batch, but I just wanted to check that this looks like a sensible approach, and I've not created any memory problems? The separate timeline onload isn't really necessary now I guess, but I've left it so that I can do a different initial animation. TLDR: I guess I'm just looking for a bit of validation on my animation, as I don't really know what I'm doing! Thanks! Nick
  4. Ah, nice. Funny how obvious it is when you see someone else's approach. Thanks a lot for your help!
  5. Ah, makes sense. Yeah this now works, thanks! "(max-width:999px)": function() { animation = gsap.timeline({ paused: true }); animation.fromTo(item, { height: '0' }, { height: contentHeight }); item.animation = animation; return function() { animation.kill(); console.log('kill it max-width'); } }, --- You mean because I've got one ScrollTrigger.matchMedia() call per menu item? headers.forEach(header => { const item = header.nextElementSibling; addAnimation(item); // Because ScrollTrigger.matchMedia() is called from here? header.addEventListener('click', () => { // snip }); }); I'm trying to pull the matchMedia() call out of the loop, but the animations themselves refer to each individual menu item and its height, so I'm struggling to work out the logic of this. Will keep working on it, just wanted to check I understood you correctly! --- I think this was another case of me misunderstanding the docs, this part: // if you put this INSIDE one of the functions, it'll only revert the recorded elements when that media query no longer matches. I did initially have the saveStyles() calls outside of matchMedia() function. I think I was desperately trying anything I could before I realised it wasn't css styles that were my problem 😄 Thanks a lot for your help, really appreciate it! Nick
  6. Hi Jack, Thanks for the reply. I guess I'll have to look into doing it manually Out of interest, don't the docs suggest you can use it for that purpose, or have I misunderstood them? Either way, I take it then that I should clear up/kill the other animations in each media function?
  7. I think I must be fundamentally missing something with the matchMedia function: I'm not using it for scroll trigger animations, but it works for different non-Scroll animations at different screen sizes, which is great 🙂. Problem is, if I resize the window the previous animation is still active, despite the teardown return function being called. What have I missed? 🤷‍♂️
  8. I mean this is pretty reassuring - it definitely feels like I'm winging it a little bit right now. You're right, I should spend more time with the docs, but I honestly think I've only just got to the stage where I can even put the docs in context. I guess I can take some heart in the fact that if I look back at how I was a few weeks back, I know much more. And RE my problem - It ended up being a JS/me issue. Mainly me 😊 Thanks for taking a look anyway!
  9. Another day, another battle with an animation not working (reversing) as I'd expect 🙂 Was just wondering if anyone had any tips on debugging? I've output the timeline object - is there anything that people look at first to get a clue to what's gone wrong? For example I thought I might look for a 'progress' variable, or something to show where the playhead was. Then I realised I was making it up 😄 (Have now realised I can get the progress through `time()`) Just curious if there were any good threads or articles on the topic? It might certainly reduce my reliance on the forum when things go a bit pear shaped! Nick
  10. Not wanting to take advantage... but... 😊 How would you deal with a box-shadow on the element that scrolls in? My actual nav bar has that, and it's an interesting problem - on the container (obviously) doesn't work, and the container masks the element scrolling in... so that wouldn't work either... I guess I could try to make the container a couple of pixels larger than element? Just wanted to double check as the element's dimensions are dynamic, so it's probably more work than I think it is (no change there) 😄 *edit: ohhhhh, maybe a margin? **edit: Yeah, that worked 😊
  11. Hi Cassie! Ugh, I've no idea why I thought to use a wrapper round the menu, but not round the items themselves 😄 Am going to blame the tiredness. Thanks a lot!
  12. Morning all! I'm trying to get my menu items to look like they're sliding down from the menu itself. I've a couple of problems though: 1: I don't know how to deal with the items being visible behind the menu as they slide in. I thought about having a menu wrapper the same color as the background for it to slide behind, but the contents are positioned absolutely to each item, meaning I don't think I can get a z-index lower anyway 2: I tried animating height instead, but couldn't get it to look very good, it's not quite the look I'm after, and it also suffers from looking like it's fading in as well Does anyone have any suggestions on how to achieve this sort of look? Or alternatively how to make it look good in a more simplistic way? Thanks! *edit: I guess I could use the menu wrapper idea and place the contents divs completely outside of any other container, then manually find the position of each item and place the contents relative to that, but that seems very fiddly for what I'm trying to achieve!
  13. That doesn't keep the aspect ratio of the menu items though does it? That's kind of what I was getting at - I guess I could position the menu absolutely and then scale that separately to the height of the wrapper? *edit: Ah, yes it does, I'm being an idiot