kodralex

Amazing. Thank you, Cassie. What you said makes sense. I'll spend some time dissecting your JS to better understand how you actually did that. Once again, thank you. The community behind GSAP is fantastic; it helps so much with learning.

Thanks for replying and updating Cassie, On your example the outer-wrap panel unpins once the 'part six' panel is 32px from the right edge of the viewport. Is it possible to change that to the left edge of the viewport? Like the attached image. So the last panel scrolls all the way from right to left and then the outer-wrap unpins.

I have a pinned horizontal scrolling section with panels of different widths. I'd like the pinned scrolling to finish (unpin) when the last panel (Part Six) is 32px from the left-hand edge of the view point. Is this possible? I've reviewed all the documentation related to the ScrollTrigger end, and nothing is related to what I'm trying to do. Thanks

@Sahil Thank you 👍

I have two image panels scrolling vertically: one up and one down. The panel on the left slows when the wrapper panel gets closer to the top of the screen, rather than both panels being consistent speeds (one up and one down). Any ideas why?

Perfect thanks Rodrigo 👍

I've got a panel that uses scrollTrigger and pins the scrolls horizontally and then unpins. At the point of unpinning I'd like to add a class 'stuck'. The code I'm using for this section is like this // Research section panel gsap.to(".panel-wrap", { xPercent: -200, x: () => innerWidth, ease: "none", scrollTrigger: { trigger: ".research-section", start: "top top", end: () => innerWidth * 3, scrub: true, pin: true, invalidateOnRefresh: true, anticipatePin: 1, } }); I've tried using toggleclass and it partially works but after scrolling further down the page the class is removed. Any ideas?

Thanks, Cassie. Really helpful. I had it in a regular environment and then moved to Codepen to test it quicker, but dev tools are a much better approach. The added option of being able to replay and scrub quicker. Thanks for your time and help.

I'm trying to rotate an arrow from the bottom left (out of view) into view. I've attached a rough image with the direction of the rotation in red. I've been messing around with transformOrigin for some time now and can't get it right. I've read through the docs on the Mozilla site to try and better understand transformOrigin position, but alas, I need a little help.

Really good to know that thanks. That could have just saved me hours of trying to figure out why it wasn't working.

I've created an update codepen with all the elements container within an SVG and a clipPath added. Much like @akapowl demo. One thing that is really puzzling me. I've got rotationY: 90 set to one of the paths (.house) in the SVG. But it doesn't work. If I change from .house to the whole SVG, it works fine. Is there any reason this wouldn't work on a path? https://codepen.io/alexkodr/pen/RwqaRqO

Ahh yes didn't even cross my mind to just do it all in one SVG. That would have been simpler from the get-go. Thanks for the example you generated ? This forum is great for learning.

Updated to timeline approach and got it working great. One last question. If I've got an item appearing from behind a hidden area (in this case, the arrow). If it is a square/rectangle, I can wrap it in a container and set it to overflow: hidden. In this case, it's a custom shape. I'm using a clip-path. Is that the correct approach? Or would you do it a different way? I've updated the codepen so you can see what I mean (excuse the clip-path is slightly off at the minute). Thanks

Perfect, thank you. I'll figure it out. Just wanted to make sure I was on the correct path.

Hi, I'm trying to animate two SVGs using scrollTrigger. I want the arrow to animate after the house animation is finished. But I'm struggling to figure this out. I'm guessing I'd need to move both items (that are currently separate) into one timeline and do it that way. Is this the correct approach? Thanks, Alex