Riccardo1091

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

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

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.

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

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.

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.

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

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

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

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 }) } )

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

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

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