Jump to content
GreenSock

amit95

Tile reveal animation

Recommended Posts

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

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

@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?

 

See the Pen KKRmxZj by amit_rai95 (@amit_rai95) on CodePen

Link to comment
Share on other sites

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:

 

See the Pen KKRmxZj by amit_rai95 (@amit_rai95) on CodePen

  • Like 1
Link to comment
Share on other sites

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

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

 

See the Pen KKRmxZj by amit_rai95 (@amit_rai95) on CodePen

  • Like 2
Link to comment
Share on other sites

@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

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

  • Like 4
Link to comment
Share on other sites

Ah, that's exactly what I was after. Cheers for assist guys :)

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×