Mattrudd

Happy Friday folks... Currently scratching my head trying to work out how to set the start of the second scroll trigger (the one managing the text-container tween up) so that it fires precisely half-way through the Lottie animation. In short, the text-container on the left (holding yellow and orange blocks) moves up as I want it to (yellow block up to display orange block) but not when I want it to. Of course, setting the start position of the trigger (Lottie element) to 50% only relates to spatial rather than temporal measurement 😆 I can tweak the start and end offsets manually to match where the Lottie animation is at, but just wondering if there's a more precise way of doing it? Maybe not, or not worth it, but curious nonetheless. Ta!

Aha! Thanks @GreenSock

Gotcha - an if else statement. Thanks! The minus in front of the brackets in the first one I quoted throws me... Incidentally, I ended up going back to the template to reset all the widths I'd edited and confused! https://codepen.io/matt-rudd/pen/PodjLMO Think I've got there... the last panel with the mask is just shy of being responsive, as my clunky way has to cater for the left padding of the first block (I wanted this so that the horizontal content sweeps into the viewport from the right rather than simply going from still [in-view] to moving)

Ah of course! That makes sense. Now to get my head around the solution related to: var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); And also need to properly grasp ternary operators e.g. x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()

@GreenSock Thanks, I think I'm a little wiser - I've balanced the CSS values like that to try and get the difference mask moving over... That's correct - I'm wanting the horizontal movement to stop when the end text is centred, then the difference mask moves over, then once the section is all white, it unpins and moves up to continue the vertical flow of the page. I've got very close to balancing it all better than the above pin, and then got confused again with all the width settings! Apologies that it turns out to be a CSS not a GSAP issue thought - I'll colour up the different elements and try and work it out! One thing though - I've used the 'relative to the start' prefix a fair bit recently, but what threw me with this example is the "+=" without a numerical value following.

'Sup GSAPpers! Wondering if you generous bunch could help me... I'm modifying a horizontal scroll example that I'm pretty sure @akapowl shared on here to incorporate a black to white difference transition before the pinned horizontal section scrolls up. I've managed to pull this off, but what I'm struggling with is shortening the length of the horizontal scrolling section. It stems from not fully understanding the Scrolltrigger end function: end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), I've tried modifying the widths of all the different elements including .pin-wrap and .animation-wrap, but the length of this section is obviously set by this end function. Sure it's simple enough when you know... but "+=" used in this way is new to me... is it an addition assignment? Tried to unpack this on my own but not got very far (late here in the UK, which isn't helping!) I think once I get my head around this I'll be able to shorten the horizontal section and have the text pin centrally in the viewport while it transitions black to white before unpinning vertically up. Hope that's a good enough explanation? Thanks you lovely bunch.

Nailed it again @akapowl. Thank you! 🙌

@mvaneijgen No need to apologise dude! Really appreciate your efforts. It could be a great shout to rebuild the animation solely in GSAP. That would still require a nested pin I think, but potentially a lot easier than dealing with Lottie. Thanks for the tip on animating yPercent instead of top!

Hmm I'm not sure why the Lottie isn't showing - in inspector the SVG of the element seems to be positioned correctly (top of the phone screen) but it's not appearing as I'd expect. Ideally I'd like the lower images to 'push' the Lottie 'up and out' so to speak, rather than have it fade out, if I understand you correctly there. I moved your playhead addition to before the slides tween... and it seems to show the right sequence of pinning, just with a blank space rather than the animation appearing. Albeit with a very long delay before the white Lottie section is pushed up. https://codepen.io/matt-rudd/pen/oNPZgVm

Hey, thanks for your reply. I did think of including it in the timeline, but figured the need to pin the Lottie first would mess with the flow. I've been guilty of missing simple solutions while looking for complex ones before 😏 The Lottie element is tucked in here: <div class="phone-mockup-slide phone-mockup-slide-1"> <div class="top-logo" id="lottie"> <div class="LottieSection"> <div class="Lottie-block"> <div id="title"></div> </div> </div> </div> </div> Your pen doesn't show the animation working for me, but you've given me food for thought, thanks.

Hi all, I'm a little stuck trying to get a Lottie animation to pin and play before a sequence of images. What complicates all this is that the Lottie animation and the images that follow share the same pinned container. I'm looking to get the following sequence working: pin the phone container, scrub through the Lottie animation (pinned in place) Lottie animation unpins on finish and moves up and out Images follow directly on, scrolling up into view within pinned phone container Phone unpins and scrolls out of view at end of image sequence Hope that makes sense! (You'll see in the pen that I've commented out the Lottie section... so only 4 and 5 of the sequence are showing). Scoured the forum and beyond to try and get my head around this 'pin within a pin' challenge, but have come up short. Tried setting pinType to transform etc... and saw that pinnedContainer doesn't support nested pinning. Appreciate it's best to avoid nested pins... maybe there's a better way to achieve the sequence I'm after? Thanks as ever.

Hugely grateful as ever @akapowl! Thanks loads. Feel like I've come pretty far with GSAP, thanks to this forum, but it's still sometimes the really simple things that trip me up!

Hi folks, Happy New year to you (only 4 days over the limit 😅) I'd like to animate a Blotter.js effect using ScrollTrigger instead of the way it's currently set up in my pen to animate onmousemove. The gap in my knowledge is how to make Scrolltrigger multiply the two values (material.uniforms.uOffset.value and material.uniforms.uRotation.value) I understand how to call a standard function using Scrolltrigger, but here I'm wanting to affect a specific value as the page scrolls (rather than as the mouse moves). There's a Codrops article here that details hooking up Blotter.js to scroll but figured this wouldn't work in conjunction with ScrollTrigger/Scrollsmoother. Have a feeling it may involve something like an onUpdate function 🤔 but I'm likely way off there. Fully fully appreciate you couldn't possible support another library but hoping to sneak this within the GS remit - as a wider question about affecting values in the way I describe with ScrollTrigger. 🙌

Great tip, thanks @Rodrigo 🙌

Hi @GreenSock, haven't yet had chance to make sure everything's up to date - I know I'm using the unpkg.co distribution for the latest GSAP main, but will check ST and SS etc. A further quirk is while trying to diagnose any of my own errors by rebuilding the site in a Codepen, it ran on Safari flawlessly... so wondering whether it's an issue with the Live Server plugin I'm using in VS Code. If only all code was as good as GSAP! Anyway - thanks again for the nudge about the refresh placement.