GSAP Stacked Animation Card

[Mustafa Dilmaç]

hello all;

 

its my first post here. ı look arround for this animation but cannot find similar one so ı made my animation. Still have some problem with sticky. Before animation start unset position so GSAP can detect my element hight and place markers in correct points. But ı guess it's still not fine for best practice. I'm open advices and ideas. 

 

Thanks all

See the Pen KKGZZwr by mustafadilmac (@mustafadilmac) on CodePen

[GSAP Helper]

Thanks for providing a minimal demo! 🙌 Yeah, that position: sticky stuff is definitely throwing things off. It's completely repositioning things. Typically it's not a good idea to do position: sticky. Have you looked into pinning? That's the ScrollTrigger way of doing things. 

 

Unfortunately it's a bit beyond the scope of help we can provide here to rework your demo for you, but I'd definitely look into pinning. 

 

There are a bunch of 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. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly (we do offer paid consulting services and we could certainly help you get this set up properly with enough time).