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