anandpatel

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?

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. https://codepen.io/anandpatel/pen/mdeEXpx Any ideas where I might be going wrong?

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

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?

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.

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);