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

[Ziafat Ali]

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

[Rodrigo]

Hi Ziafat,

 

I'm a bit lost with this:

12 minutes ago, Ziafat Ali said:

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.

I don't see any headings animation in your code:

const tl = gsap.timeline();
tl.from(".orange", {opacity:0})
  .from(".purple", {opacity:0})
  .from(".green", {opacity:0})
  .from(".coral", {opacity:0});

For auto scrolling the large text section what you can do is use a different setup in terms of the CSS. Right now the content is centered vertically in that particular panel (green), it should be justified to flex-start in order to have the text at the top of it. Then all you have to do is translate the element with the text, similar to this example:

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

 

Hopefully this helps.

Happy Tweening!

[Ziafat Ali]

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.

[mvaneijgen]

ScrollTrigger can only ever be on the timeline not on each individual tween. You hardly ever need more then one ScrollTrigger to get the desired effect and the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

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

[Ziafat Ali]

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.

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Ziafat Ali]

Great!!!

 

It's working as I want

 

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

 

Thank you so much for the help!

[Ziafat Ali]

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,

[Rodrigo]

Hi,

 

Is always desirable that you try something by reading through the docs, experiment a little yourself and see a few examples in GreenSock's codepen collections.

 

Using the ScrollTo Plugin is as simple as this:

const regLink = document.querySelector(".reg_link");

regLink.addEventListener("click", (e) => {
  e.preventDefault();
  gsap.to(window, {
    scrollTo: {
      y: tl2.scrollTrigger.end,
      autoKill: true,
    },
    duration: 1,
  })
});

https://greensock.com/docs/v3/Plugins/ScrollTrigger/end

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

 

Finally you're still using old syntax in your GSAP instances:

gsap.timeline().from(".pin_sec2", 8, { autoAlpha: 0, delay: 1 })

Duration should go in the config object and you don't need to delays to each element, just use the position parameter:

gsap.timeline().from(".pin_sec2", { autoAlpha: 0, duration: 8 }, "+=1")

 

Hopefully this helps.

Happy Tweening!

[Ziafat Ali]

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.

[Rodrigo]

Hi,

 

Where exactly should I look at this? You didn't provided a minimal demo.

 

Happy Tweening!

[Ziafat Ali]

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!

[Cassie]

I just copy pasted in Rodrigo's code and it's working.

See the Pen QWzNdGg?editors=0010 by GreenSock (@GreenSock) on CodePen

You can also scroll to labels like this demo which may be a better approach for you considering you're crossfading.

See the Pen ExvbZXg?editors=0010 by GreenSock (@GreenSock) on CodePen