Udit Takkar

@GSAP Helper here is the link to the PR https://github.com/layer5io/layer5/pull/3895. Although it is working fine on desktop but they are few problems on mobile https://github.com/layer5io/layer5/issues/3921.

@GSAP Helper Yeah i figured out the timeline but do i make the container sticky when the subcontent inside let's day design features is being scrolled ? useEffect(() => { const _timeline = gsap.timeline({ defaults: { duration: DURATION, ease: "sine.out", }, paused: true, smoothChildTiming: true, scrollTrigger: { // anticipatePin: 1, trigger: ".test-container", start: "top top+=96px", end: "bottom top", markers: true, scrub: true, }, }); _timeline.to(".design-features",{ // y: featuresContainer.current.scrollHeight, yPercent: -400, // duration: 1, scrollBehavior: "smooth", ease: "Power1.easeInOut" }); },[]);

Basically the section here on this page https://layer5.io/cloud-native-management/meshmap . There are three sections Design, VISUALIZE and COLLABORATE. all of these sections have multiple li points and images which gets displayed as you scroll and the title becomes sticky. This implementation does not use GSAP library and has few limitations like you would have to scroll inside the container of section to see the points . if you scroll outside of container you won't see the inner container scrolling. How can we implement this using GSAP ?