Jump to content
Search Community

Build reveal effect

Zoker test
Moderator Tag

Recommended Posts

Hi there,

 

Currently I have a pinned effect, where one section gets pinned and the other one slides over it.

Just like this:

See the Pen LYzwrYe by Zoker (@Zoker) on CodePen

 

But now I want to reverse this effect and reveal the second section, while the first one slides away. 

 

An example of this can be found in the attached codepen below

 

Currently the effect is made with CSS and an empty element.

Is there any way to archive something similar easily with GSAP?

 

Thanks!

See the Pen LYzwrGQ by Zoker (@Zoker) on CodePen

Link to comment
Share on other sites

Hello @Zoker

 

While you certainly could utilize ScrollTrigger for handling the sections that are to remain static via pinning them, I personally do not see the need for adding that extra layer of complexity if you just want every other section to remain static.

 

Instead of using a placeholder element to create that 'window' in between sections, you could also utilize some CSS selector logic alongside a margin-top on the sections neccessary, for it to work.

 

What ScrollTrigger will definitely come in handy with, will be the toggling of the visibility of the sections that lay underneath, for when you're going to extend the amount of sections in there.

 

Here is an idea for how to handle that with ScrollTriggers for each reveal-section, utilizing the section before as the trigger and toggling a CSS class on the reveal-section when needed. Keep in mind though, that generally these forums are not intended to provide solutions for how to build certain effects. Hope this will help a bit, nonetheless.

 

See the Pen BawXvMv by akapowl (@akapowl) on CodePen

 

  • Like 2
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.
×
×
  • Create New...