pixelarchitect

I am using ScrollTrigger and SplitText to animate lines of text when they enter the viewport, this works great but in some cases (mobile most often) the line breaks are weird. I can imagine this happens when you drag the window yourself smaller because the breaks are already added but this also (sometimes) happens when you load the website without dragging the window smaller or bigger. I also added a screenshot as an example of what happens, does somebody know what happens or know a solution?

I have made this pinned element that pins at a certain point and continues scrolling at a certain point but currently it continues to scroll to late, I want it to continue scrolling when the bottom of the last section hits is aligned with the bottom of the pinned section (.pinnedtext4 in this case). I tried adding the class to the end trigger but it doesn't work. Does anyone have an idea? ps. If you have a tip or example link how I can change the class of the titles on the left side depending on the lighting up of the text on the right side, please let me know as well!

@Rodrigo that indeed works! Thank you so much for explenation!

I am using the SplitText with Scrolltrigger to make text appear on scroll, this works well for chars and words but as soon as I want to do it per line it doesn't work well anymore. The animation still triggers but it doesn't appear from behind the white anymore (except for the last sentence). Maybe this is just a CSS solution but im not sure... Does somebody know the thing im missing? If you change 'quote.split.lines' to 'quote.split.chars' or 'quote.split.words' you can see what I mean because those work as intended (appearing from behind white) [CODEPEN WAS DELETED]

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!