purple-lightsaber

I'm wondering what kind of logic I'd need to use in order to turn a section into a vertical scroll after clicking a button. Wouldn't I need to unpin the horizontal swipe section? I'm just not sure what to use in order to go from horizontal to vertical. I'm ok with having scrollbars on each axis.

I'm actually looking to have each container with its own vertical scroll. Is it logically possible to do this? Would I need pin logic like this?

Sorry if that was confusing! I've made a codepen that hopefully describes what I'm looking to do much better. I'm not sure if this requires the .swipe-section to be unpinned but perhaps you can point me in the correct direction. Thanks again for any feedback https://codepen.io/ac09/pen/xxjbdoN

Thanks for the response! I'm actually looking for the .swipe-section to "un-pin" once it gets to the orange section in order for the actual .panel > .orange to be scrolled vertically instead of having a separate section that is not nested in the .swipe-section. I think the pseudo logic would be: Orange panel OnEnter { if( scrolledDown){unpin the .swipe-section} } and then scrolling back to the top of the orange section would have logic to pin the .swipe-section again so that the panels can go back to the horizontal swipe animations.

@GreenSock Thanks so much! I'm looking for the first way you've done it, so the slide over triggers faster. Is it possible to have the last orange section be 500vh instead of another section?

I've got this codepen using a horizontal slide over animation. I'd like the last (orange) section to switch to vertical scroll, I beleive this would mean unpinning the scrolls trigger. How can I achieve this? Thanks for any feedback!

@Cassie thank you so much!

The first panel in this code pen (last code pen at the bottom) is 200vw, I'd like this panel to horizontally scroll to the end of the panel, and then trigger 'Observer.create({ slide from the left animation})' instead of having the Observer trigger right away on mousewheel. Would a timeline be best for this solution? Or how can I trigger a custom function at the bottom of the .panel viewport? https://codepen.io/ac09/pen/MWVxzmr I''m essentially combining: Horizontal Scroll https://codepen.io/GreenSock/pen/WNjaxKp with Observer yPercent Animation https://codepen.io/GreenSock/pen/XWzRraJ Thanks for your help! 200vw panel I'd like to horizontally scroll until the end before the slide over animation occurs

Thanks for pointing me in the right direction @Cassie !

@Greensock thanks for the answer it works great. I'm curious if there is also a way to have the scrollTrigger trigger as soon as the mousewheel is scrolled instead of having it trigger when the mousewheel stops. Thank you!

@OSUblake thanks for the codepen Blake! How would you speed up the snap so that it's not so slow. I've tried changing the duration and ease with no luck. Best, Andres

@Cassie thank you so much for this, exactly what I was looking for!

I'd like to copy this site's hero, the video expands but I'd also like it to scale down in size right after. https://www.basedesign.com/ I've got the GSAP code working for the scaling up, but how do you add the scale down scroll trigger after the first one is complete? $(".sticky-circle_wrap").each(function (index) { let triggerElement = $(this); let targetElement = $(".sticky-circle_element"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top top", end: "bottom bottom", scrub: 1 } }); tl.fromTo( targetElement, { scale: 0.35, opacity: 0.40, }, { scale: 0.75, opacity: 1, duration: 1 } ); });

Willing to pay an experienced GSAP'er for this. I explain the task at hand here: The slide up animation I'm looking for is done here: https://codepen.io/GreenSock/pen/vYgqpdQ But more than willing to explain over a zoom call. Thanks!

I've got 3 sections of copy separated by two bullet points. I'd like the first section to slide up on page load, then I'd like the second section (in between both bullets) to appear when all 5 of its sentences are in the viewport. Only problem is that its first and last line (lines with bullet points) are sharing lines with the first and last section. Is it possible to slide up only the copy which is within these bullet points, instead of the entire line sliding up which is what is happening now. Just to clarify when the line "aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam" scrolls into viewport I'd everything in green to slide up but not the part in red. Lorem ipsum dolor sit amet, consectetur adipiscing - the blue text slides into place on page load incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation magni dolores eos qui. ⬤ Quis autem vel eum iure Neque porro quisquam est, qui dolorem ipsum quia dolor reprehenderit qui in ea voluptate velit esse quam nihil ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam - the green text slides into place when this line scrolls into viewport et quasi architecto beatae vitae dicta sunt explicabo accusantium doloremque laudantium, totam rem aperiam Feedback is appreciated - the red text slides into place when this line scrolls into viewport