Teebo

Hi, How can I achieve a similar multi-step form like the following: https://forming-typeform.vercel.app/ I am challenged by the the positioning of each form section in the center after scroll os done. I find it challenging also to have the side nav buttons to handle the scroll direction accordingly. Any ideas on implementing this with gsap or pure JavaScript and CSS will be appreciated.

@OSUblake for the case of Angular, I have the refresh in the OnInit hook method. This is just after registering the plugins and before using the scrollTo plugin. A brief below. ngOnInit() { gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollToPlugin); ScrollTrigger.refresh(); // refresh here ... gsap.to(window, { scrollTo: { y: this.triggers[i].trigger, autoKill: false }, overwrite: true, duration: 1, ease: 'expo.out' ... }); } I am guessing the ScrollTrigger.refresh() worked for my case because the elements used with the scroll plugin are the triggers on my ScrollTrigger config. For context, It is for the implementation I was assisted with here:

@OSUblake just a quick update, I have found a solution to my specific problem. I have used the below: ScrollTrigger.refresh(); This made the scroll(ScrollTrigger & ScrollPlugin) to adhere to the framework specific way of scrolling to the top on route change. Thank you!

@OSUblake Ok ok I see, thank you so much for taking the time to correct the pen. I appreciate, it really helped clarify the usage of the functions

@OSUblake thank you, do you mean something like this? https://codepen.io/Teebo/pen/WNOJBGJ Am I understanding?

Sorry about that, the pens were not saved and shared old version, I have shared the wrong link for the first one. I have updated the links now, thank you.

Hey @Cassie I have tried the gsap.quickSetter() function. I might be using it wrong as I do not get smooth animation of the boxes as the mouse move. Could it be because in my case I am not making use to the set function as mentioned in the shared documentation link? This is the pen that uses quickSetter: https://codepen.io/Teebo/pen/PojeQWO This is the initial one: https://codepen.io/Teebo/pen/MWoGWGp I have tried something like below also: This still does not give a performant and smooth animation. const boxSet = gsap.quickSetter(movableElement, "css"); boxSet({x:(e.clientX * shiftValue) / 250, y:"random(-10, 10)", duration: 1}) Am I missing the point of the quickSetter function?

Hey Cassie, ? great!, thanks a lot, I will definitely check it out!

Hi, I'd like to check if the implementation I have is optimal and a better way to achieve this feature. I do not have examples to show but only the pen I have created. I have to onMouseMove handlers on the pen. I would like to also put back the elements to their initial positions when when the mouse moves out of the section. Any guidance or suggestions are appreciated.

@OSUblake Yes I have, I am beginning to think the issue is not with the ScrollPlugin. Thanks a lot for assisting

Yes I am using Angular

@OSUblake I still need help, I thought I give it a try first before I ask. But I'm still having a challenge

Hi, I would like to reset the scroll position before navigating away from a page. ScrollPlugin seems to remember the position from the previous page when on a new page. I have a sample usage: gsap.to(window, { scrollTo: { y: this.triggers[i].trigger, autoKill: false }, overwrite: true, duration: 1, ease: 'expo.out' });

Hi @GreenSock OK OK I see, thanks so much for this feedback. It works very well on my side; Thanks a lot ?

@OSUblake version 3.6.1 does not solve the issue on my side

Yes I think that the onEnterBack has a bug; please let me know if I am missing something ?

Hi @Cassie, thank you, Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen. You will notice the scroll will start automatically for all the sections up until the top. I thought it was due to the scroll start triggers being on view all the time but tried to give a value like: start: '90% bottom', But this does not solve the auto =matic backward scrolling. Please check carefully this pen: https://codepen.io/Teebo/pen/BaRaqQL I have added the markers so that it is easy to see

@akapowl thanks a lot; I will delete this one

Hi all, I need some guidance on what I might be doing wrong and if my approach is efficient The scrolling breaks onEnterBack when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top.I am getting no errors.I am not sure why this is happening in need some guidance.Any suggestions or corrections will be much appreciate, thank you.

Hi, thank you for the suggestion. I have updated the question to include the CodePen project. I see the re-production of the issue

Hi all, I need some guidance on what I might be doing wrong and if my approach is efficient I have recently asked a question regarding snapping sections on scroll The response from @akapowl was really helpful because it opened my understanding a bit and directed me to some light as I was lacking understanding of the ScrollTrigger plugin. I now have implemented what I wanted to achieve by following this pen (https://codepen.io/GreenSock/pen/rNLOdbB) This works fine, however it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top. I am getting no errors and I see it sometimes happens on the demo from the pen. I am not sure why this is happening in need some guidance. Any suggestions or corrections will be much appreciate, thank you.

Hey @akapowl Thanks a lot for the suggested. BTW the demo of this on the video plays at 00:58. Let me do some reading and try it out. Thanks, I really appreciate the assistance.

Hi all, I am asking for guidance, I am new to using the ScrollTrigger plugin. I am following the tutorial here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/ I would like to create the Pair with CSS Scroll Snapping - ScrollTrigger animation like how it is on the video introduction. What I would like to achieve is making the snapping smooth. Any suggestions or examples will be much appreciated

This is great, I love the tool and the super support it has

Hey I got this working thank you so much