Jump to content
GreenSock

midnightgamer

collapse head when content within fixed height container being scrolled

Go to solution Solved by mvaneijgen,

Recommended Posts

I want to achieve the following animation , but I am not sure how can i achieve the same when content within fixed height container are scrolled , so basically I want to collapse my "head" element when top of the 2nd box touch the bottom of "head" itself 

 

See the Pen qBKOEbx by midnightgamer (@midnightgamer) on CodePen

Link to comment
Share on other sites

Hey, I'm not completely sure what you are trying to do. If you could clear that up with structuring your question as follows, it will really help giving you a better answer

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

If I read your question I think you want to change the scroller element, normally this is the viewport, but you can give it an element of your choosing

 

See the Pen KKedwmM?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

  • midnightgamer changed the title to collapse head when content within fixed height container being scrolled
9 minutes ago, mvaneijgen said:

Hey, I'm not completely sure what you are trying to do. If you could clear that up with structuring your question as follows, it will really help giving you a better answer

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

If I read your question I think you want to change the scroller element, normally this is the viewport, but you can give it an element of your choosing

 

 

 

hey can you check question once again? I tried to make it more clear 

Link to comment
Share on other sites

  • Solution

I've given your second .box an extra class and set this as the trigger. Than as soon as the box hits the top of the scroller element it will move the header -100% in the y direction. You could set this animation to what ever you want, but this shows you what the logic would be.   

 

Hope it helps and happy tweening! 

 

See the Pen vYrNOWL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

16 minutes ago, mvaneijgen said:

I've given your second .box an extra class and set this as the trigger. Than as soon as the box hits the top of the scroller element it will move the header -100% in the y direction. You could set this animation to what ever you want, but this shows you what the logic would be.   

 

Hope it helps and happy tweening! 

 

 

 

Thanks for helping me out, I did not knew concept of scroller it helped 

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