[Trying to animate a div from the top of the page or relative to another div]

3 minutes ago, Cassie said:

Sure thing - as you say, you'd have to calculate the height of the other divs.
 

 

Oh wow, I was going to calculate every div height with js but this is more clever, thank you so much

[Trying to animate a div from the top of the page or relative to another div]

6 minutes ago, Cassie said:

If the divs are always going to be the same height then you can just use yPercent
 

 

If not, could you give a little more context! Thanks

 

 

Unfortunately not, the orange and yellow divs will have different content, I just need an initial animation like a "reveal", two horizontal curtains (red and blue) that open and show orange and yellow. In this animation the only element moving is blue.

 

Basically what u did is good but the other divs will not be the same height as the blue. 

 

EDIT:

Wait a moment, I could calculate the height of the other divs relative to the windows and achieve the result, maybe.....

[Trying to animate a div from the top of the page or relative to another div]

Hi, I'm trying to animate the blue div from the orange div position to the final position (to the end of the page basically).
Is there a way to make the animation relative to the page so I can use the "h" variable or at least relative to another div, the red one and not relative to itself?
Hope I made myself clear. Thank you.

 

In other words I want the red and the blue div to touch each other, then the blue goes down revealing orange and yellow divs.

 

See the Pen poLGxwE by Mahanon (@Mahanon) on CodePen

[Address Bar on mobile messes up the positioning of an element after animation]

I think the solution lies HERE, I just need to figure out how to link the yPercent to the variable in the article....

[Address Bar on mobile messes up the positioning of an element after animation]

Thank you, the only thing is that I need the logo (isthmo) to occupy just the space it needs, not 50vh, keeping proportions. This way we're gonna end up with a bunch o white background above and below the logo on other devices.

 

[Address Bar on mobile messes up the positioning of an element after animation]

46 minutes ago, Cassie said:

Hey there - Have you tried ScrollTrigger.config({ ignoreMobileResize: true}) ?

 

That's what it's for!

Hi, nothing changed unfortunately, it works when I try it on pc browser in the responsive mode but not on a real smartphone, same problem as above.

By the way I've loaded the ScrollTrigger plugin first, am I missing something, I see no errors on the console.

[Address Bar on mobile messes up the positioning of an element after animation]

Hi, it's me again, I've achieved what I wanted both on desktop and mobile but on the latter I have this new problem of the addresbar messing things up.

Let me explain, on mobile I have positioned this "isthmo" logo right above the bottom of the page, if I swipe up it goes on top, if I swipe down it goes back to the starting point. The address bar keeps getting in the way, I don't think u can see the problem on the codepen due to its structure so I'll attach some screenshots from the real website. 

I tried:
ScrollTrigger.normalizeScroll(true);

but it wasn't working well, plus disabled the page refreshing swiping down

Should I try:

ScrollTrigger.config({ ignoreMobileResize: true})

 

Thanks for your patience

See the Pen rNdedwa by Mahanon (@Mahanon) on CodePen

[Why scrolling down faster than scrolling up with GSAP?]

34 minutes ago, GreenSock said:

So you do want the entire page to resize during this animation (scrollbar growing/shrinking/showing/disappearing)? Or do you just want to show/hide this element when the user does something to indicate they want to scroll in a particular direction? Because you could just put a container element directly on top of the #top) with overflow: hidden and the child set to yPercent: 100, height: 100vh and then just animate the yPercent to 0 when appropriate, maybe using Observer. 

 

It's hard to troubleshoot your Observer attempt because you didn't provide a minimal demo CodePen. 

I think I solved the issue changing approach as you suggested, using transform translate (yPercent) rather than position, also Observer for the win.
Thank you again

[Why scrolling down faster than scrolling up with GSAP?]

I know I should give u a demo and I apologize for that but the thing is that since I'm in the learning phase all I was able to accomplish was already in the first post unfortunately.

I'm gonna focus on what u told me and try again with observer, I think it's the right tool.

Thank you again, I'm open to any other suggestions

[Why scrolling down faster than scrolling up with GSAP?]

58 minutes ago, GreenSock said:

Sorry, I don't understand what you mean by "overwrites partially the animation..."

 

Your demo is literally changing the amount of available scroll area which of course can force the scroll position backwards. Let's say height of all the content is 1000px (viewport is 500px tall). So we've got a total of 500px available to scroll. Then you start scrolling down and it triggers the bottom element to animate its "top" to 0 (from 100vh) when there is even 1px if scroll (because you set start: "top bottom"). When that animation ends, there is literally 0 total scrollable area because ALL of your content only takes up 500px (the viewport height), so now that the scroll position is forced to 0 (the browser cannot scroll beyond where there is content), it triggers the onLeaveBack of that ScrollTrigger. 

 

So it's a logic issue in the way you've set things up (if I understand your question correctly). 

 

And again, it would lead to the scrollbar totally changing its height during the animation...and then disappearing which feels pretty weird as a user. 

 

Does that clarify things at all? 

 

Thank You Cassie and Jack, there's of course some problem on the logic I'm pursuing, I know that the height of the page plays a key role on the animation I'm working on so I ask u this: if you were to make this animation from that I tried to explain the beginning, where would you start from?

I don't want to bang my head unnecessarily

If u think there's a better way to approach this animation I'm all ears

 

The only caveat is that the two divs must be 100vh, always, at least when they're visible.

(I tried with observer, it seems more fitting but I'm having similar problems with the changing page height

 

Observer.create({
  target: window,         
  type: "wheel,touch,scroll",
  onUp: () => {
    move('100vh')
  }, 
  onDown: () => {
    move(0)
  }
});

function move(value) {
  gsap.to("#bottom", {
    "top": value,
    duration: 1.3,
    ease: Quart.easeInOut,
    // overwrite:true
  })
}

)

[Why scrolling down faster than scrolling up with GSAP?]

I just need the scroll trigger, not the actual scroll.
As you can see, when I scroll down on the mousewheel it overwrites partially the animation on the top property of the red div, that's the problem.

The example you provided makes the red div higher than 100vh, I need both divs to be perfectly 100vh, the red one sliding onto the first one on scroll and viceversa, no extra space.

Is there a way to make it work with overflow:hidden on the body? When the red div is on top there's no scrollbar and the following animation scrolling up on the mousewheel works fine

[Why scrolling down faster than scrolling up with GSAP?]

I understand what you're saying but now I have a very long scrolling on the red div.

Let me explain the goal using other words:
I have two divs with 100vh, #top is fixed to the top of the page, #bottom is right below the window with position relative and top: 100vh.

When the user scroll down I need to disable the actual scrolling and simulate the movement by removing 100vh to the "top" property of the #bottom element thus overlapping it on the #top div

When the user scroll up I need to disable the scrolling function and add 100vh to the "top" property of the #bottom again, basically I need to go back the initial position

Hope it helps 

[Why scrolling down faster than scrolling up with GSAP?]

I'm new to GSAP and JS in general, I'm having some problems figuring out why I have two different speeds while scrolling up and down.
It seems like scrolling up triggers the animation without adding the actual scroll amount and that's ok, on the other hand you can scroll down ignoring the animation completely just by keep scrolling, I need a way to prevent the actual scroll movement and leave just the trigger.

There's also a problem once it scrolls all the way up that automatically reverse the animation, I guess it's because it's beyond the limit, why does this happen?

The objective is catching the down scroll event and make the second div go to the top of the page while the first stays fixed below and viceversa.
 

I tried looking at the most common GSAP mistakes but maybe there's something I'm not seeing
Hope u can help, thanks

 

See the Pen rNdedwa by Mahanon (@Mahanon) on CodePen