NickWoodward

This is amazing. Have you got any more examples Rodrigo? *edit: Also it's surprisingly smooth with my laptop struggling

Hi Jack, Sorry for the late reply, something pretty urgent came up that's been taking up all my free time this week so I haven't had a chance to look, but I just wanted to say I appreciate the help! Nick

1) Ah that makes sense, thanks 2) I do, that's really interesting and I don't think I would've got close to working that out on my own so thanks! The animation is now definitely closer to what I want, but I think there's still something up with the height of the description box at the beginning of the animation (both when closing and opening). You can see the description jumps to a size larger than its content when closing, and expands past the size needed then shrinks when opening. I've given the desc a bg colour and slowed down the animation to make it more obvious. I've spent a fair amount of time trying to fix it, but ultimately the problem is that I don't know what's causing that jump. I initially thought it was the text wrapping, but then saw that the containing div was jumping too. https://codepen.io/nwoodward/pen/YzOQZWx?editors=1010

Cheers Rodrigo, but even height seems to wait before animating: https://codepen.io/nwoodward/pen/WNgjrZe

ok, nice, although no chance of getting the animations to overlap Flip.from(state, { duration: 0.6, ease: "power1.inOut" }).to(currentDescription, { autoAlpha:1, display: 'block' }, '<'); seems to wait before it runs the 2nd animation. was hoping to get it to open the description div as the element was transitioning

well, the answer to that question seems to be "no" ? v2

Took a while, but new `v1` is looking better, thanks Out of interest, where should I place other animations on the element I'd like to take place? Chain it to the Flip animation? codepen

That is exactly what I'm doing now But yeah, unfortunately that was me being an idiot and not forking the pen and trying to fix the problem, sorry. If you look at it now (I've reinstated the original) you should see the issue without that weird gap between the first and second element, but you're right, I'm stripping the forked demo right back until i properly understand it

It does for the scaling @Rodrigo, thanks alot! Unfortunately though it's still animating from above and below its position every other animation or so (if you look at smaller screen sizes!). Perhaps I should look at that error!

Just trying to pull apart and re-implement some of the FLIP demos, and was just wondering why I'm seeing odd behaviour with both scaling and cards coming from above and below their original positions? (it seems to happen every other card?)

great site, like the code effect at the bottom oh, and congrats! hopefully I'm just behind you in the job hunt

Awesome, thanks cassie *Edit: and lol, 'not broke'. Of course my actual project has other ideas ?

Hi all, Just thought I'd ask if anyone had any thoughts about this button that changes to a loader icon, waits for an async function to complete, and then displays a success icon. It's in a useable state, but what I've come to realise is that my first efforts are usually a bit... strange So if anyone has a sec to comment on what I could be doing better (for example maybe 1 timeline that pauses vs 2 animations?) I'd appreciate it very much! Thanks, Nick

That is a cool feature, but it doesn't seem to work for me - I'm assuming because it impacts animations rather than their callbacks? ie, it's the `setActive` call that needs to be skipped, rather than the animation itself

Just added the smooth scroll effect on clicking individual menu items - it's a shame it sets the intermediate menu items as active, think that looks pretty ugly ? *Edit: maybe if I debounce the setActive function so it'll only work on the last call? Edit: Nope

I updated the pen with your changes @Rodrigo, an actual menu and a dummy section, in case it's useful to anyone later. I'll probably add a @Carl inspired underline animation too I'm a bit surprised though thatonLeaveBack: () => setActive(sectionsMap.get(sections[i - 1]))isn't erroring though when scrolling back up? https://codepen.io/nwoodward/pen/NWBmZgd?editors=1011

Thanks a lot @ryan_labar and @Rodrigo, much appreciated!

Actually, having reworked my codepen, just specifying the amount of element that needs to be visible should make it work as needed. Going to try now const section1 = ScrollTrigger.isInViewport(".section1", .6); const section2 = ScrollTrigger.isInViewport(".section2", .6); const section3 = ScrollTrigger.isInViewport(".section3", .6); const section4 = ScrollTrigger.isInViewport(".section4", .6); Edit: XD That did not work as planned! My idea was if .6 had to be in view then if each element was full screen then there could only ever be one active element. Don't know why that logic doesn't work, but it doesn't!

Thanks Ryan. Yeah I did consider onEnter until I saw there was an isVisible function. You're probably right though, I can't think of an easier way to do it, just thought I'd check

So `ScrollTrigger.isInViewport()` can tell you if an element is visible, but is there a way to use this to work out the 'most' visible, or most recently visible? I'd basically like to switch which menu item is active based on which element is visible, rather than just when it hits a certain point on screen I just thought I'd ask if there was a simple way to do this before I started working out a way to track the changes *Edit: This approach almost works, but flicks to 4 (or I'm guessing to whatever the default of the ternary statement is I'm using)

Hi @mvaneijgen, yeah that's not a bad idea, thanks. Maybe I should just come back to it with fresh eyes too. I'm sure me from a year ago would be impressed

Was just wondering if anyone had any nice examples of cards being staggered? Quite a subjective question I know, but I always struggle to make them in particular look good - they always seem to come out either too aggressively/quickly or too slowly, like each card 'plods' its way out. That feels like a UK word, but it's as it sounds, slow and cumbersome XD I definitely find it hard to strike a balance, and spending ages looking at the animations is like looking at a word you know well for too long - it starts to look strange either way... Actually, when making a pen to try and demonstrate my point I found the `slow` ease in your demo graph which I kind of like. Maybe for three cards like this there are better animations than staggers? Idk, I guess I'm just looking for some inspiration that is less 'showcase' and more 'component'/'section', if that makes sense (don't get me wrong, the showcase is awesome, it's just rare I make similar sites) *Edit: The pen below needs to be opened, mobile or stacked animations I don't really have the same issue with so the demo is not small-screen-friendly

You know what, I think it's literally in my head - I think increasing the gap between the two animations tricks my brain into thinking there's that sort of effect, This isn't quite what I'm after, but much more like it: https://codepen.io/nwoodward/pen/vYaZRGV?editors=1010 @elegantseagulls thanks - saw the effect in your agency video and realised it was just the timing

Nice site ?

Hi, I'm trying to replicate an effect that I've often seen in page transitions. Of course now I'm looking for it I can't find it anywhere, but it looks like the codepen linked, but it feels like the element is straining to swipe across the screen, like it's being held back and then released, and then is followed by another similar element. I've tried playing about with the ease visualiser, but can't get anywhere near it. Just wondering if anyone knows wth I'm talking about, and might have a link to a codepen that implements something similar? Thanks!