japortegijs

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

Right! Totally forgot about CSS selectors, thanks!

https://codepen.io/japortegijs/pen/bGVdQmM I think I got it working.. but how can I refactor this so that the first section is initially visible?

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...

https://codepen.io/japortegijs/pen/bGVdQmM 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.

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..

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!