Section pinned with Slider horizontal on mobile and vertical on desktop

[miguelquispe]

Hi Everyone. Greetings from Perú.

I'm stuck with this functionality and I come here for your help.

 

I will try to explain:

 

I have a main section pinned with scrollTrigger and inner it I have a "slider" with multiple items and dot navigation. This slider should change its items while make scroll. Then when is mobile view the slider move his items horizontal and when is desktop the items movement is vertical. Also, the dot navigation should be updated with every item showed.

 

----

 

I try to use scrollTrigger in every item but I don't have good results as you can see in the codepen attached.

I attached images for reference.

 

I hope you can help me.

 

Thanks for your attention. Have a nice day!!

See the Pen ZEmEMwp?editors=0100 by miquel (@miquel) on CodePen

Edited June 9, 2023 by miguelquispe
grammar

[mvaneijgen]

Hi @miguelquispe welcome to the forum!

 

Let's take a step back and focus on one issue at a time. Personally I always like to use timelines when working with ScrollTrigger this will keep the logic separate from he animation (this is just personal preference, you can certainly also go your route). 

 

I've remove most of the ScrollTriggers, less is more! And made your mobile scrollTween trigger based on the mainSection and set its pin to true, now we don't need the main tl on line 10 anymore. This timeline will do everything, animating the slides and pinning them. Then on desktop you want the slides to change to vertical. I've just copied the whole logic from the mobile timeline and moved it to the desktop and I've only changed the xPercent to yPercent (great use of those properties btw! Most people struggle with them when starting out).  

 

See the Pen zYMxaoz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Now the animations are working as expected right? Let's see if you can fix the rest of your goals yourself. Keep in mind the fewer ScrollTrigger/timelines, the better. If your stuck just post back here and anyone will jump in and help, try focusing on one part at a time.

 

I wanted to also share  this video tutorial our own @Carl dropped just yesterday. I think there are somethings in there that will aid you! Hope it helps and happy tweening!