[Side by side vertical split view]

I have managed to resolve the positioning issue, however I have been struggling on how to increase the duration each image is displayed for. Currently the 5th image is shown the longest.

 

Is it possible to change the timeline so that each image is shown an equal amount of time?

[Side by side vertical split view]

I have been working on an example codepen, but I can't see to get it to match the Daft Punk example.

I am using CSS Sticky position.

 

See the Pen mdeEXpx by anandpatel (@anandpatel) on CodePen

 

Any ideas where I might be going wrong?

[Side by side vertical split view]

I don't suppose anyone know of an example which uses ScrollMagic to trigger an animation?

[Side by side vertical split view]

Thanks for the reply, I can see from your scroll examples that the scroll position controls the fade in and out effect.

 

Do you know how to trigger the animation to start and finish completely instead?

[Side by side vertical split view]

Does anyone know how to recreate the scroll effect found on this Daft Punk site? https://pitchfork.com/features/cover-story/reader/daft-punk/

 

There there are several images on the left and text on the right, and as you scroll the image on the left are triggered to appear one after another.

 

Any help would be much appreciated.
Thanks Anand. 

[Fade Image Sequence with Scroll Magic and GSAP]

I am trying to replicate a similar affect, but instead of crossfade between images straight away, does anyone have any ideas how to fade out the previous image completely before fading in the next image?

 

const fadeImagesTrigger = document.querySelector('[data-scroll="fadeImagesTrigger"]');
const fadeImages = document.querySelectorAll('[data-scroll="fadeInOut"]');
const fadeInOut = new TweenMax.set(fadeImages, {autoAlpha: 0});
let tween = TweenMax.staggerTo(fadeImages, 1, {autoAlpha: 1}, 1);

let scene = new ScrollMagic.Scene({
    triggerElement: fadeImagesTrigger,
    duration: '200%',
})
    .setTween(tween)
    .addIndicators()
    .addTo(controller);