Udit Takkar
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Udit Takkar
-
-
@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 ?
How can i implement this feature section using GSAP?
in GSAP
Posted
@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.