[Slow scrolling speed on mobile/touch screens.]

Testing on Android browser and only the horizontal scroll cads scrolls slowly and other scrolls normally. 

 

See the Pen mdvZLJN by ziafatali (@ziafatali) on CodePen

[Slow scrolling speed on mobile/touch screens.]

Hi,

 

I have a slow scrolling speed issue on touch devices for one of my GSAP applications. Here is a quick code pen.

 

I would appreciate your help in this regard.

 

Thank you,

Ziafat A.

See the Pen WNPQXVr by ziafatali (@ziafatali) on CodePen

[Horizontal Scrolling Cards and Pin Parent in the center of the Viewport]

Great!

 

Thank you for the help.

[Horizontal Scrolling Cards and Pin Parent in the center of the Viewport]

Greetings,

 

I'm trying to create a horizontal-scrolling card layout and want to pin the card's parent in the middle of the viewport, but I don't want the spacing above and below the pin section. Currently, card scrolling works but the parent scrolled away behind the cards. Please take a look at the code pen demo and advise.

 

 

Thank you,

See the Pen WNPQXVr by ziafatali (@ziafatali) on CodePen

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

I'm sorry for not being able to provide a minimal demo.

Here is the demo. There are absolute positioned sections stacked on each other, and I want to move to the respective section by clicking the indicators from the indicators list below section 3 with the same cross-fade effect and also toggle the active class on the indicator.

 

I had been trying hard for a week and also used the SrollToPlugin, but unfortunately couldn't find any solution.

See the Pen GRwaKBb by ziafatali (@ziafatali) on CodePen

 

I would really appreciate the help and support.

 

Thank you!

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

Thank you so much for the help, especially the new method is great

However, the scrollTrigger.end only moves a single frame and does not move to the end of the timeline.

I've tried a few things, but sorry, I'm still new to this, so can you please take a look?

 

Thank you,

Ziafat A.

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

The fade transition works great but there's another issue with this

I need to scroll to the last section by clicking on the "Register Now" link, which I just added to the top header, and once reach there, we should scroll forward/back normally (through the fade transition).

 

See the Pen GRwaKBb by ziafatali (@ziafatali) on CodePen

 

Can you please advise?

 

Thank you,

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Great!!!

 

It's working as I want

 

See the Pen GRwaKBb by ziafatali (@ziafatali) on CodePen

 

Thank you so much for the help!

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

Sorry for the confusion; I just created a new codepen with a fresh script to understand better. I just want the last section make scroll after the fade transition is completed as it has content exceeding the height of the containing section.

 

See the Pen gOQyyLo by ziafatali (@ziafatali) on CodePen

 

I really appreciate the help.

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

Apologies for the confusion; actually, I'm still not able to find a proper solution. Here is an updated codepen with the exact layout and requirements.

There are a total of 4 stacked sections, and each will appear stacked on the scroll, but on the first section, the logo and heading will animate first, and after the completion of the animation, the second section will appear. I also want to interact with the content, like the href and buttons should be clickable on each section, and the last section content should be normally scrollable after fading into the viewport.

See the Pen NWEzwea by ziafatali (@ziafatali) on CodePen

 

I really appreciate the help!

Regards,

Ziafat A.

[Stacked Fade-in Panels with Auto Scroll content on last slide]

Hi,

 

I'm looking for something similar to the provided codepen. Still, I'm having a few issues with the animations of headings on the first panel, and I  want to start fading the board after completing the heading's animation. Also, I need auto-scroll content once the fade is completed on the last panel. It would be appreciated if anybody could help.

 

Thank you,

Ziafat A.

See the Pen bGQLezz by ziafatali (@ziafatali) on CodePen

[Basic example of GSAP 3.x with ScrollMagic Please]

Thanks for the reply, I'm going to work on a modern website with parallax and on scroll animations using GSAP.

[Basic example of GSAP 3.x with ScrollMagic Please]

Hi everyone,

 

I've worked on GSAP 2.x with the scroll magic but I had to use a lot of plugins like TweenMax, TimelineMax, gsap.animations etc.

No I'm going to switch on GSAP 3.x and want to confirm what file I really need in order to use GSAP 3.x with ScrollMagic.

 

Thank you,

Ziafat A.

[How to toggle a menu with different animations.]

Hi @omarel !

 

Thanks for the reply, yes your solution is also close to my requirement.

 

Thanks again.

[How to toggle a menu with different animations.]

Hi @Shaun Gorneau !

 

Yes, that'll help, Thank you so much.

[How to toggle a menu with different animations.]

Hi @Shaun Gorneau !

 

 

Thank you for the reply and your code works perfectly but actually, I have some advance animations in one of my projects and I tried to make a simple example in the codepen. I want to do it with timelines like I want to play TimeLine1 while opening the menu and TimeLine2 while closing it.

 

Please see the menu of this site https://designcanada.com/ how its menu animates and while closing, it animates to the other way.

 

Thank you very much for the support.

[How to toggle a menu with different animations.]

I'm trying to toggle a menu with different animations while opening and closing. The animation plays for only once and after closing the menu, it doesn't work again. Can you please help?

See the Pen davavM by ziafatali (@ziafatali) on CodePen