pixelarchitect

That did the trick, thank you! https://codepen.io/pixelarchitect/pen/dyqprYJ

@elegantseagulls Thank you so much for you time, so I updated the code to this: /// OLD CODEPEN /// And it does seem to work a little bit better but once I change the values behind the yPercent to higher values it still is not vertically aligned with the text on the right when the blocks are in the center of the screen (the 50 value is also not fully vertical centered)

@elegantseagulls unfortunately im getting a 'Uncaught ReferenceError: lax50 is not defined'

I am working on a very basic parallax effect and it works great so far, the only thing I would like to achieve is that the content block is actually in its "original" position once it is in the center of the screen. (So in my example the text should be vertical aligned with the other once it reaches the center of the screen) /// CODEPEN IS REMOVED Old javascript: const parallax50 = gsap.utils.toArray('.parallax50'); parallax50.forEach(lax50 => { gsap.to(lax50, { yPercent: -50, scrollTrigger: { trigger: lax50, start: "top 100%", end: "top 0%", scrub: true } }) }); Of course I could change the start to: top 50% but then there is no parallax effect for the first part.. I hope somebody can help!

That is exactly it, I'm gonna take a look at it, thank you!

I build a pinned element that pins when the bottom of its container reaches the bottom, and continues scrolling when the next section arrives in the viewport. When you scroll back up it (of course) does the same same thing the other way around: it first pins the bottom of the left column for a while and then starts scrolling again. What I am looking for is that on the way back up the bottom of the left column is not pinned anymore and just scrolls all the way till the top arrives in the viewport and then pins until the right column is done scrolling. Scrolling down (this works): - Both left and right columns scroll - Left column ends so it pins because right column is still scrolling - Right column ends so left column starts scrolling again Scrolling up: - Both left and right columns scroll - Left column ends (top enters viewport) and pins because right column is still scrolling - Right column ends so both left and right stop scrolling because the top of the screen is reached

Hi @akapowl, I was just about to delete this question since I figured it out myself this morning by indeed using the endtrigger, the codepen I used is already updated to a working version but thank you for answering!

I made a div with text that gets pinned at the bottom (left is shorter than right). This is good but I want the bottom of the text to be pinned until the next section comes into the viewport, currently it just randomly starts scrolling while the next div didn't enter the viewport yet. Somebody knows a solution or can help me in the right direction?

stagger inside of scrollTrigger was indeed a mistake and was for testing purposes, should have taken that one out! Thanks for enlightening me on batch, that definitely helped and it's working now!

I somehow can't seem to get stagger work in a forEach / fromTo, can someone help me into the right direction?

Definitely prefer the inertia instead of the scrub although it will add another library but it works smoother, thank you!

I was wondering if it's possible to make the drag go smooth? I tried looking at InertiaPlugin using 'inertia: true', but it didn't work for me. Somebody knows the solution or can help me into the right direction?

I feel so dumb right now... never noticed the features overview! Upgraded! :)

I became a Greensock Club member yesterday but after downloading the zip file from my profile with all the extra plugins I am missing the InertiaPlugin, how or where can I find this?

https://codepen.io/sandhie/pen/wQqWOw

I have been working almost the whole day to try to figure out where that scroll bug came from, I didn't have the bug on codepen but when I implemented it in my site it was super bad... that css trick did the trick! @GreenSock & @akapowl you guys should wear capes!

Is it possible to reuse the same animation over and over on the same page? Currently all the animations on the page are triggered as soon as the first one gets triggered (also all the ones offscreen), what I like to prevent is using the same code over and over again for every element with the same animation.

I am currently trying to built a page where you can scroll horizontal instead of vertical. I have basically everything working but wanted to add a drag function to it. I tried implementing gsap's Draggable and I got the pointer cursor working but it is not dragging, I feel im close but can't find the solution, someone has an idea?

That is definitely the direction I was looking for @akapowl 😄

@limbo thanks for answering, the problem is that I don't want to have a full height footer, the footer just needs to be a certain height (amount of text + 100px white space on top and bottom). It makes total sense that the tween needs to end to keep those measures, so what I think I need to figure out is how to endpoint is the amount of pixels equal the height of the variable height footer

I have created a revealing footer with a scrub text, it all works fine but there was a small thing that bothered me and I was curious about if there maybe was a different way of doing this. If you look at the white spacing on the top and the bottom of the text in the footer it is different than the padding I gave to the footer element (I set the value to 150px 0 100px 0, but it's different). In the code I said it the text block should go up 300pixels and starting point is -300px from the bottom. In a perfect world I like to keep the padding as the space on top and the bottom the same as I chose but still reveal the text from the bottom. Someone has a solution or suggestion or idea?

Thank you for responding @GreenSock, I was hoping to find a solution without adding another JS library, especially for something so small, I'm gonna take a look at it but definitely still open for other suggestions!

I made a timeline animation with GSAP but I want the last text to go from text-align center to text-align left. I kinda made it work with targeting the css but I rather find a smooth way, does somebody have an idea how to solve this? I just can't find the solution.

Sometimes it can just be so simple... learned a lot, thank you all so much, I think it's working as intended now

What an awesome solutions are presented up here, thank you all so much. I was playing a bit more with this and stumbled on a few "bugs" (dont know how to call them differently). 1. When the container has a padding the cursor image is automatically off center (the amount of pixels of the padding) 2. When you re-use the container (right after) again, it doubles that padding space You can see the two bugs in the codepen down below. I could resolve the padding issue by adding a -40 to the 'setY(e.pageY -40);' but I'm wondering if there is a cleaner solution, especially keeping point 2 in mind. https://codepen.io/pixelarchitect/pen/ZEyzQWm