JAguVillar

Hello! I was wondering how could I implement the scroll effect of this page https://timestwo.design/spacefor It is possible using gsap?

Sure, I added just a little, the scrolltrigger for pinning the desire section, I will reformulate my desire behaviour, I want to have a scrolltrigger for pinning the desire section, and one scrolltrigger for each "card" inside the container, each card ,I think, should have a scolltrigger too, because what i want to do is, when the scrollbard passes truough each one, it must trigger a method that I have, and when the scollbar reaches the end of the pinned section it should continue the normal scroll. https://codepen.io/Agoto/pen/XWyJPQj

Please help! In my codepen I have a minimal structure of my website, the spacer classes are other sections, the dont have importance, the container class is wer I am having trouble trying to achieve what I want, what I want to achive is: using scrolltrigger (I suppose), when the container reaches the center or top of the viewport, I want to pin it, and unpinned it when desire animations on the grey boxes end, for example: reach the container while scrolling, when reached, pin it, the user should keep scrolling and, for example, each grey box should do something, I gues inside a timeline, when the timeline ends I need to unpin the container and keep scrolling. I don't know if I was clear in the explanation, and I dodn not put ant js code because a). it doesnt work as desired and b) I think the ones thant answers this will do a much better work than I do! Thx in advance for the help!

Hello! I wnna know how could I achieve something like the lateral pannels in this page, I think that what this web page is doing is making the items sticky for a certain scroll length , how would you achieve it? using scrolltrigger?

Amazing and thank you for answering! I watched your aritcle but I must oversaw the part of responsive units. I will stop working with scroll magic then and I'll wait for your plugin instead, I am sure that it will work 11/10 like gsap!

Hello! I am very new around here, learning gsap fow a couple of weeks now, and now I am implementing Scroll Magic into the mixture, and it works like a charm! I have one problem right now, I have this tween, with this parameters: let t1 = gsap.timeline(); t1.fromTo(".strawberry", 4, { y: 0, x: 0, autoAlpha: 0 }, { y: 150, x: 500, autoAlpha: 1, ease: Power3.easeInOut }) I am trying to move my "strawberry" class element from those coordinates (0, 0) to (150, 500), in the desktop layout it works just fine, but in a mobile layout, it doesn't, it moves the 150 and 500 units, obviously in mobile layout is a lot, so the element goes far away. How can I set responsive values to my x and y parameters? Or what solution do you recommend? Thanks and sorry for my English, keep to good work devs!