Jump to content
Search Community

How i can do this with scrolltrigger?

Poylar test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi.

I'm trying to have the effect that my fixed block will only appear after section:first-child and disappear if it reaches .footer, but it should also disappear if the scroll page is above section:first-child.

How can I track this and do it? Or is it better to use some kind of intersectionObserver?

 

Basically I just need to remove the .fixed block when the footer or section:first-child is in the viewport (so they don't overlap) and show it again after footer or section:first-child leave viewport

See the Pen XWPqvEg by poylar (@poylar) on CodePen

Link to comment
Share on other sites

  • Solution

I've created a class .show and when that is triggered it will play an animation on the .fixed element. That animation is paused and hidden with CSS, so that it doesn't show on page load. 

 

Then it is just a question of checking where you want your triggers, I've set them now both to the bottom of the view port, so as soon as the top of the element hits the trigger it is shown and again when the end is triggered it is hidden. And I do this for both the enter, leave, enterBack and leaveBack.

 

I've made it a separate timeline that gets controlled by multiple ScrollTriggers, you could probably create the ScrollTrigger in the timeline and have each ST control a new timeline, but this seemed a better way of handling it to me. Also instead of classes I've created a timeline animation because well GSAP and that is what we're all about 😝 Hope it helps and happy tweening! 

 

See the Pen JjaZjYj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

18 hours ago, mvaneijgen said:

I've created a class .show and when that is triggered it will play an animation on the .fixed element. That animation is paused and hidden with CSS, so that it doesn't show on page load. 

 

Then it is just a question of checking where you want your triggers, I've set them now both to the bottom of the view port, so as soon as the top of the element hits the trigger it is shown and again when the end is triggered it is hidden. And I do this for both the enter, leave, enterBack and leaveBack.

 

I've made it a separate timeline that gets controlled by multiple ScrollTriggers, you could probably create the ScrollTrigger in the timeline and have each ST control a new timeline, but this seemed a better way of handling it to me. Also instead of classes I've created a timeline animation because well GSAP and that is what we're all about 😝 Hope it helps and happy tweening! 

 

 

 

thank you!!

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...