ScrollMagic section wipes but with fadein/fadeout

[japortegijs]

Good afternoon,

 

I have a challenge and I can't seem to figure it out... I'm using ScrollMagic to create a Timeline a bit like https://scrollmagic.io/examples/advanced/section_wipes_manual.html. Except I'm trying to fade in and fade out my sections, the sections are stacked upon each other (position: absolute). The first section should be visible at the start, then fade out and the second section should fade in, etc, etc... The problem I'm running in right now is that section 2 and 3 start at te same time and not after each other. Could really use some help and an example would be great. I can't recreate my project on Codepen, because I'm using all sort of external plugins, like StimulusJS. But here's my code:

import { Controller } from 'stimulus';
import * as ScrollMagic from 'scrollmagic';
import { TweenMax, TimelineMax } from 'gsap';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

class SM extends Controller {
  connect() {
    const TWEEN_DURATION_PERCENTAGE = 4;

    const controller = new ScrollMagic.Controller();

    new ScrollMagic.Scene({
      triggerElement: this.containerTarget,
      triggerHook: 0,
      duration: this.containerTarget.offsetHeight * TWEEN_DURATION_PERCENTAGE,
    })
      .setPin(this.containerTarget)
      .addTo(controller);

    this.sectionTargets.forEach((section, i) => {
      const animation = new TimelineMax()
        .to(section, 1, {
          opacity: i === 0 ? 1 : 0,
          delay: i * this.sectionTargets.length,
        })
        .to(section, 1, {
          opacity: i === 0 ? 0 : 1,
          delay: i * this.sectionTargets.length,
        });

      new ScrollMagic.Scene({
        triggerElement: this.containerTarget,
        triggerHook: 0,
        offset: section.offsetHeight,
        duration: this.containerTarget.offsetHeight * TWEEN_DURATION_PERCENTAGE,
      })
        .setTween(animation)
        .addTo(controller);
    });
  }
}

SM.targets = [
  'container',
  'section',
];

export default SM;

 

I hope anyone could help me, I would really appreciate it!

[ZachSaucier]

Hey japortegijs and welcome to the GreenSock forums! 

 

ScrollMagic isn't a GreenSock product and we don't really recommend using it. In fact, GreenSock is developing its own scroll plugin! 

 

Until that gets released there are other work arounds though. Are you wanting the scroll position to fire the whole fade animation once it's reached or only as much as has been scrolled to thus far?

[japortegijs]

 

Maybe this helps a bit. I have one container which is 100vh. Once I reach this container it gets stuck and I can scroll within that. On scroll within that container I want the sections to appear one by one, based on scroll position. The sections are dynamic, so I can't hard code div#1, div#2, div#, etc..

[ZachSaucier]

That didn't answer my question... Can you please try to create a minimal version of what you're trying to do on CodePen? We don't need to see everything in your project, just some colored divs moving around. This post talks more about how to do so:

 

[japortegijs]

See the Pen bGVdQmM by japortegijs (@japortegijs) on CodePen

 

Will this help? If you scroll the red section fades away, then the blue one should fade in, blue one fades out, green one (last one) fades in and stays in.

[ZachSaucier]

1 minute ago, japortegijs said:

Will this help?

That answered my question, yes  

 

I don't think you should use any scrolling library. You're essentially wanting a slider functionality so I'd use an approach similar to this (obviously the way you're animating is different but the concept is the same): 

 

 

[japortegijs]

It's not really what I'm looking for.. the only issue I have now is that the second and third sections start at the same time... and not one after another...

[ZachSaucier]

1 minute ago, japortegijs said:

the only issue I have now is that the second and third sections start at the same time... and not one after another...

That's a ScrollMagic issue, likely related to how the markers are positioned. But I can't help you there.

 

2 minutes ago, japortegijs said:

It's not really what I'm looking for..

It may not be what you're asking about but it is the core concept of how this behavior should be done if you ask me. 

[PointC]

Your demo isn't loading the gsap script which allows ScrollMagic to take control of the tweens.

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js

 

I'd also highly recommend adding debug indicators.

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js

 

[japortegijs]

See the Pen bGVdQmM by japortegijs (@japortegijs) on CodePen

 

I think I got it working.. but how can I refactor this so that the first section is initially visible?

[PointC]

.staggerFromTo(".js-section:nth-child(n+2)", 1, {

 

[japortegijs]

Right! Totally forgot about CSS selectors, thanks!

[ZachSaucier]

FYI this is even more straightforward using GSAP's yet-to-be-released scroll plugin.

[japortegijs]

Any ETA of the scroll plugin? And/or alpha/beta versions to play around with?

[ZachSaucier]

2 minutes ago, japortegijs said:

Any ETA of the scroll plugin?

It may not be available for another 3-6 weeks (no promises... we're still in the relatively early stages right now). 

 

3 minutes ago, japortegijs said:

And/or alpha/beta versions to play around with?

No public beta right now.

[Jim Balbin]

hello, in the japortegijs example, can I add nav and vertical dots to it? If possible, can you give me a little example please, I still need to know your libraries

[ZachSaucier]

On 4/13/2020 at 2:00 PM, japortegijs said:

Any ETA of the scroll plugin? And/or alpha/beta versions to play around with?

It's released now by the way  

 

6 hours ago, Jim Balbin said:

can I add nav and vertical dots to it?

Sure you can. We highly recommend using out ScrollTrigger plugin linked to above. You'd create the nav buttons and then animate the page to the correct scroll position based on which one is clicked. Similar to this example but slightly different since the elements are positioned absolutely:

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

[Jim Balbin]

Thanks for your reply, I am fascinated with your library. can you help me on how can I do it this way? scroll through the section and navigate my page before and after the scroll

 

Thanks! 

 

I use Elementor plugin in Wordpress

 

[ZachSaucier]

15 minutes ago, Jim Balbin said:

I use Elementor plugin in Wordpress

Do you write code or just use a visual builder? GSAP is a coding tool.

[Jim Balbin]

The content I do with the elementor visual builder, but behind it I apply the jquery and javascript codes. I have an example but I'm trying to get it to come out as the example.
Demo : http://gd-02.dhdinc.org/contacto/

my custom code is here http://gd-02.dhdinc.org/wp-content/themes/manya/custom.js?ver=5.4.2 (line 361)

[ZachSaucier]

@Jim Balbin It seems like you just want the effect that you can create with ScrollToPlugin?

[Jim Balbin]

Thank you for your response and I hope not to bother you with my difficulties, I was watching and if it seems to be. The objective of my scroll slider is as follows:
When I get to the slider container, the user can see using the scroll with fade, dots or next navigation effects in 100vh without being interrupted by another container. When you reach the last slide, continue browsing the web. in the same way when returning to the first slider navigate the upper containers.

[ZachSaucier]

15 hours ago, Jim Balbin said:

When I get to the slider container, the user can see using the scroll with fade, dots or next navigation effects in 100vh without being interrupted by another container. When you reach the last slide, continue browsing the web. in the same way when returning to the first slider navigate the upper containers.

Locking people into one section (even if it's scrolling) is not great usability, I don't really recommend it. But you can do it with ScrollTrigger's pinning and a timeline animation that goes through each slide. Let us know if you have specific questions.

[Jim Balbin]

Thank you for supporting ZachSaucier. Look, I have run ScrollTrigger (in Swiper Slider), but I think I'm failing in the css. I am sending you a demo and below is another one made with ScrollMagic which is how I would like it to be applied in Swiper. Maybe using ScrollMagic if it can be done but I have trouble applying it.

The goal is As shown in Swiper Slider but to work as the ScrollMagic.

 

Demo http://gd-02.dhdinc.org/contacto/

 

Custom JS http://gd-02.dhdinc.org/wp-content/themes/manya/custom.js?ver=5.4.2 (line 70 - Swiper | line 390 - ScrollMagic)

[ZachSaucier]

Hey Jim. It's really hard for us to help on live sites like that. We highly recommend that you create a minimal CodePen demo to create the basic effect and share that pen with us if you have issues.