amit95 Posted September 19, 2022 Share Posted September 19, 2022 I'm almost certain I've seen a demo regarding this on the forums or somewhere on Codepen, but cannot seem to find it anywhere. This may also be because I don't know the correct name for the animation. I'm simply referring to it as "tile reveal". Could I get some assistance locating this demo please? In short, this is the way the animation works: User clicks a link 5 .popup__tile elements then grow from the bottom of the page, one by one (i.e. tile 1 will be larger in height before tile 2 starts to grow) until it has filled the screen. Then the content fade in If the above is hard to visualise, I have created a pen showcasing the markup I recall the demo showcasing. If anyone can direct me to a demo for this, or what the correct name for this animation is, that'll be helpful. Thanks See the Pen KKRmxZj by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 Hi @amit95, Unfortunately I can't remember such codepen example, sorry. Also the codepen you linked doesn't have any code pertinent to the request/issue you have. Right now I don't have time to create a full example for this, perhaps another user could chime in and give it a go. In the mean time I would approach this by setting the tile elements inside a fixed element with no height and a low z-index, place the tiles at the bottom of the screen, give them a 100vh height and a scale Y of zero (is better to animate scale than height). Then add the content inside a container with relative position and a higher z-index than the tiles container and animate the tiles with a stagger animation to scale Y of 1 with the transform origin at the bottom. Hopefully that is enough to get you started. If I have time later I can set up something Happy Tweening!!! Link to comment Share on other sites More sharing options...
amit95 Posted September 19, 2022 Author Share Posted September 19, 2022 @Rodrigo - I should have bookmarked the demo when I saw it. Can't never seem to find things when you need them 🥲 Thanks for your insight. To clarify, you're saying: Set the parent (in my case .popup) to position: fixed Set all .popup__tile elements to height: 0 and give them a negative z-index via CSS Set the content that I want to fade in after the tiles cover the screen (.popup__content) to position: relative via CSS Then via GSAP, give the tiles a height of 100vh and also set their z-index to positive? Is the above all correct? If so, I've tried two approaches currently. One which works with height, and another with scaleY, both with do nothing right now. I think I've not followed one of your instructions? Can you point me in the right direction? Link to comment Share on other sites More sharing options...
amit95 Posted September 20, 2022 Author Share Posted September 20, 2022 Hi @Rodrigo Just updating (and in case anyone else wonders about this animation in the future), I think I've solved it! Just working on doing the reverse on exit, but this was essentially what I was after: 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 20, 2022 Share Posted September 20, 2022 Hey @amit95, Great to see that you were able to crack it down!! 🎉🥳 Now that I see it, you're right, I think I once saw something like it, but for my life I can't remember to what it is related or when it was posted 😅 Happy Tweening!!! Link to comment Share on other sites More sharing options...
amit95 Posted September 20, 2022 Author Share Posted September 20, 2022 @Rodrigo - Haha yup. But at least you know now that "tile animation" is a reference to that 😂 I've also added the exit animation in for anyone who finds it useful. Feel free to comment on how to optimise the codebase 2 Link to comment Share on other sites More sharing options...
amit95 Posted September 20, 2022 Author Share Posted September 20, 2022 @Rodrigo - Having looked at my animation again, is it easy enough to inverse the direction of the animation? For example, on entry, the tiles load from the left. But on exit, I would want them to start hiding from the right. transformOrigin: "bottom right" doesn't seem to be doing the trick? Link to comment Share on other sites More sharing options...
akapowl Posted September 21, 2022 Share Posted September 21, 2022 If I understand correctly what it is you want to do, transformOrigin will not be helpful here, @amit95 Instead, you might want to use the stagger as an object, so you can define its settings in more detail. I changed the stagger of your closing tween to this e.g. // old stagger: .2 // new stagger: { each: .2, from: 'end' } So, did you mean like this? See the Pen gOzxPgx by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
amit95 Posted September 21, 2022 Author Share Posted September 21, 2022 Ah, that's exactly what I was after. Cheers for assist guys Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now