Jump to content
Search Community

How can i implement this feature section using GSAP?

Udit Takkar test
Moderator Tag

Recommended Posts

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 ?
 

 

Link to comment
Share on other sites

Welcome to the forums. @Udit Takkar.

 

Is your goal to make that sub-content scroll regardless of where your mouse is? That site simply uses position: sticky for the header content and then native scrolling for everything - are you saying that you want to know how to leverage GSAP to improve the behavior such that ALL of the scroll happens on the main page rather than SOME on the main page and SOME on inner-elements? 

 

It certainly seems possible to me. You'd basically need to think of it like a timeline animation where you'd move the content's "y" property to simulate scrolling. It's probably not a trivial task. We don't have the resources to provide free "build-to-order" solutions/tutorials based on a list of requirements, but we'd be happy to answer any GSAP-specific questions for you. Or if you need more help, we do offer paid consulting services. Just contact us if you'd like more information about booking our time for that.

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

@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" });
 
},[]);
Link to comment
Share on other sites

I'm not sure what you mean, but you probably should NOT be using position: sticky at all. I've seen that cause performance issues. Typically if you need to pin something, you'd use ScrollTrigger's pinning feature. 

 

I noticed you're using React and you're not doing proper cleanup. I'd strongly recommend reading this article:

 

gsap.context() is your new best friend in React - it makes cleanup super easy and helps work around React's double-invocation of useEffect() weirdness. Also, we usually recommend using useLayoutEffect() instead of useEffect(). 

 

I'm curious why you set smoothChildTiming: true on your timeline.  

 

And scrollBehavior: "smooth" should NOT be used. That is sorta like applying a CSS transition to something that JS is animating - it totally gets in the way, throws calculations off and can hurt performance. 

 

I'd use the modern ease syntax: 

// old/outdated
ease: "Power1.easeInOut"

// new/better
ease: "power1.inOut"

I hope that helps. If you still need help, please make sure you provide a minimal demo that clearly shows the issue so we can see it in context. Here's  a starter you can fork: https://stackblitz.com/edit/react-cxv92j

Link to comment
Share on other sites

Hi @Udit Takkar,

 

A PR and an issue on GitHub doesn't help at all when it comes to find out what the problem is. That's why we ask for a minimal demo, since debugging large code bases is really hard without a deep dive and we don't have the time resources for that. We understand that sometimes isolate the issue can be hard because of the different moving parts in a project, but is what's needed to provide quick and accurate support to GSAP users.

 

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...