Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About CindyDB

  • Rank
  1. 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?
  2. 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!
  3. 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
  4. Ah shucks, sorry! I missed that. Thanks again for all your amazing assistance.
  5. 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!
  6. I've added it here: https://codepen.io/themetailor/pen/bGeJzrR Hope that clarifies?
  7. 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?
  8. 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!
  9. .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
  10. 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