Jump to content
GreenSock

PixeledCode

Remove/Hide an element and adjust the parent element accordingly on scroll

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I am trying to achieve something like in the CodePen but on scroll. Currently I'm decreasing opacity, translating to top a bit and reducing height of parent.

But Ideally, I need to remove the element so that parent can adjust height according so it's responsive.

 

Any help is appreciated.

See the Pen wvrRKvL by PixeledCode (@PixeledCode) on CodePen

Link to comment
Share on other sites

I read your question a few times, @PixeledCode, but I'm still totally lost about what you're asking. Can you please elaborate a bit? What do you mean by "but on scroll" (isn't it already happening on scroll?) 

 

If you're rearranging things in the DOM (like removing something), you might want to look at Flip plugin because it solves a lot of those challenges. 

Link to comment
Share on other sites

1 minute ago, GreenSock said:

I read your question a few times, @PixeledCode, but I'm still totally lost about what you're asking. Can you please elaborate a bit? What do you mean by "but on scroll" (isn't it already happening on scroll?) 

 

If you're rearranging things in the DOM (like removing something), you might want to look at Flip plugin because it solves a lot of those challenges. 

Thanks for replying and sorry for not making it clear.

Currently, the timeline is starting as soon as the page loads and is really glitchy on scroll for some reason.

And I'll definitely look into FLIP plugin. 

Link to comment
Share on other sites

  • Solution

Sorry, that didn't really help. I don't know what your goal is. 

 

This is definitely wrong: 

// BAD
start: ".main-tool-bar",
  
// GOOD
start: "top top"

The "start" indicates when the trigger should start and it must have two values - the first relates to the trigger, the second relates to the viewport/scroller. Or you can pass in a number like 0 if you want it to start at the very top. Please read the ScrollTrigger docs for more info. 

 

Also, you don't need to use negative delays like that - I'd strongly suggest looking at the position parameter - it's much easier. You could just use 0 for all your tweens in this case. 

 

You can have one tween handle multiple properties on the same element too - I noticed you did one for opacity and one for y for the same exact time and duration. 

 

You've got scrub: true which synchronizes the playhead with the scrollbar,  but then you also have an onEnter that calls .play() and an onLeaveBack that calls .reverse() which can't work logic-wise. 

 

I'm guessing that you want to actually remove the <p> from the document flow, animate it up 60px while fading out, and also have the bar and input collapse but in an animated way? Here's how it could be done with Flip: 

See the Pen ExwGRWV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are other ways to do it too, but Flip has some useful features. 

 

If you still need help, please make sure you provide more details about a GSAP-specific question and we'd be glad to help. 

  • Thanks 1
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.
×