CindyDB

Thanks Paul, that's perfect. Thanks for all the clarifications. I have just one more question. If I want to fade in the circles as the appear on the screen, where would I put that now?

I have a fixed element within a section and need to scroll the siblings over it. The reason for this is that I'm using a video background rather than just an image. The first item shows, but the siblings don't scroll up if the video element is set as fixed. I can't figure out how to scroll those items up and over the fixed section? Thanks!

I'm back. There are clear sections on the page and they mostly behave differently. I have set up a number of timelines to create the needed behaviours and it's pretty much working as I want it to, the problem though is that there's a lot of space between the sections. Importantly we're trying to avoid having any hard lines between sections so there are faded edges in places that obviously needs a bit of space to fade into the new section. In an ideal world I'd like to have the section that's scrolling away to still be on screen when the next one starts at the bottom so that there's more continuity between the sections. In the third section the blue cover from the 4th section covers the text a bit since it's slow to come off screen. How do I stop this? In the section with the bubble background and the row of 8 icons, I'd like to have a video playing but I can't get it to fix in a way that doesn't require another background. Any help would be much appreciated!

Ah shucks, sorry! I missed that. Thanks again for all your amazing assistance.

This is seriously amazing, thanks for taking the time. I think I understand more than I did already! I have one more question - how to I reduce the space between the 2 triggered sections. You'll see there's a full blue screen while you scroll down, I'd like to reduce that gap? https://codepen.io/themetailor/pen/eYzoooy Thanks!

I've added it here: https://codepen.io/themetailor/pen/bGeJzrR Hope that clarifies?

Hi Paul That's awesome! So now, my next question is this: Is it possible to keep the background static and have mask just move over it?

I'm using ScrollTrigger to add a mask on a page, show some text and then I'll fade in the text coming up below as well. My problem is that because the section is pinned the masked section now wipes up off the screen rather than the background staying static and the masked text (NATURAL) moving up and off the page. In my own example I keep seeing the NATURAL part after scrolling but I can't seem to get that to work in the codepen version. Please help!

.to(".masky" , {duration: 100000,delay:5000, maskSize: '100%',webkitMaskSize: '100%',autoAlpha: 1, ease: "power3",maskPosition: 'center'}) As you see above I've got a mask that's zooming in in size. It's working perfectly fine in Firefox but not in Chrome/Safari. I've tried webkitMaskSize and WebkitMaskSize, neither seems to work. I know my delay/durations are messy, but that's a next step to figure out. Thanks

I have an item that fades into view on page load. Then I hide that item on scroll and show a next item. How do I show that initial item again when scrolling back up? let wl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: "#welcome", pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: "+=100%", // end after scrolling 500px beyond the start scrub: true, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar snap: { snapTo: "labels", // snap to the closest label in the timeline duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping ease: "power3" // the ease of the snap animation ("power3" by default) } } }); // add animations and labels to the timeline wl.addLabel("textout") .to("#welcome .zoomtext", {duration: 1.5, opacity: 0}) .addLabel("btnin") .to("#welcome a.btn-round", {duration: .8, autoAlpha: 1});