[Implement multistep form like Typeform]

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.

See the Pen ZEJyxZr by Teebo (@Teebo) on CodePen

[How to reset ScrollPlugin scroll position]

@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: 

 

[How to reset ScrollPlugin scroll position]

@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!

[Slightly move elements when mouse moves.]

@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

[Slightly move elements when mouse moves.]

@OSUblake thank you,  do you mean something like this?

See the Pen WNOJBGJ by Teebo (@Teebo) on CodePen

Am I understanding?

[Slightly move elements when mouse moves.]

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.

[Slightly move elements when mouse moves.]

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: 

See the Pen PojeQWO by Teebo (@Teebo) on CodePen

This is the initial one: 

See the Pen MWoGWGp by Teebo (@Teebo) on CodePen

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? 

[Slightly move elements when mouse moves.]

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

[Slightly move elements when mouse moves.]

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.

See the Pen MWoGWGp?editors=1010 by Teebo (@Teebo) on CodePen

[How to reset ScrollPlugin scroll position]

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

[How to reset ScrollPlugin scroll position]

Yes I am using Angular

[How to reset ScrollPlugin scroll position]

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

[How to reset ScrollPlugin scroll position]

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'

});

[Layered pinning onEnterBack callback runs multiple times]

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

[Layered pinning onEnterBack callback runs multiple times]

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

[Layered pinning onEnterBack callback runs multiple times]

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

[Layered pinning onEnterBack callback runs multiple times]

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: 

See the Pen BaRaqQL by Teebo (@Teebo) on CodePen

I have added the markers so that it is easy to see

[2. Layered pinning onEnterBack callback runs multiple times]

@akapowl thanks a lot; I will delete this one

[2. Layered pinning onEnterBack callback runs multiple times]

 

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.

See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen

[Layered pinning onEnterBack callback runs multiple times]

Hi, thank you for the suggestion.

I have updated the question to include the CodePen project.
I see the re-production of the issue

 

[Layered pinning onEnterBack callback runs multiple times]

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  (

See the Pen rNLOdbB by GreenSock (@GreenSock) on CodePen

)
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.

See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen

[Creating smooth Pair with CSS Scroll Snapping - ScrollTrigger]

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.

[Creating smooth Pair with CSS Scroll Snapping - ScrollTrigger]

 

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

 

See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen

[How to manipulate flex values?]

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

[Smooth transition between sections]

Hey I got this working thank you so much