Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by cotton

  1. Exactly that, so it could either have two progress bars positioned correctly and one is hidden and the other displayed, or a class toggle that switches the colours around on a single element.
  2. How to explain... I've done a pen with both states included as separate bars. https://codepen.io/Cottonltd/full/jOZwxZP In the final site this would be a single bar but the class toggle would switch the style. So a black bar on a white background would grow to 100%, left to right then as the next section comes in the class would switch and it'd then look to be a white bar growing from left to right. Essentially I'm just trying to cover up the value jump back to zero and make it look more continuous.
  3. Brilliant, thanks again Jack. Really blows my mind how responsive, knowledgable and patient this forum is. The class toggle was to make the bar, which will be black and white on the full site, look as though it fills in black from left to right and then class toggle would switch the background colours and look to fill in white left to right etc etc. I've tried to demonstrate it in this pen but obviously the toggle is not in the right place because it's applying the it to all the progress bars. Should I create a new scrolltrigger within that function just for this effect? https://codepen.io/Cottonltd/pen/yLvXjJy
  4. Hello I've set up a ScrollTrigger that clones an element as it's wrapper hits 200px below the window (with thanks to @Cassie) I'm trying to add a progress bar that shows how far you've scrolled down the cloned element and once the active element has ended it would reset the bar and begin showing the scroll progress of the next (cloned/active) element. So essentially, each cloned element is a page and as a new page comes into view the progress bar is affected/reset/ToggleClass etc. I've tried creating a gsap.utils.toArray to capture all the cloned elements with a ScrollTrigger.create inside it although I'm not sure if this is correct or efficient. The onLeave etc doesn't seem to be having any affect on the progress bar so something must be up. Any ideas?
  5. I think/hope I've diluted this enough now and apologies again for making it more confusing than it ought to be. https://codepen.io/Cottonltd/pen/YzeVaPp What I'm trying to do is to change the colour of the .global_block and background colour as sections scroll into view. This will be affected by both vertical and horizontal scrolling sections. However, as you noted, the first of the horizontal sections is already in view (i.e. has past 'left center') then it is triggering the colour change on page load (the block should be black on load). I have three triggers working here: 1. The one that pins the horizontal section at 'top top' 2. one that changes the background colour (using a function that grabs the first and last slide colour attributes) as (1) reaches 'top center' and leaves at 'bottom center' — this has been removed for now to simplify the pen. 3. one that changes the colours as each slide section reaches 'left center' So I guess my questions would now be: – Can I make the first slide section start at 'left left' while the rest start at 'left center' – Can I ignore the first and last slides of the horizontal section and use trigger (2) to update the colours onEnter and onLeave using another colour grab function – Can I make the horizontal slides only trigger when that section comes into view rather than on page load? – Any other options available Thanks
  6. Yeah I see it and thought I'd fixed it on the fork but actually hadn't. More speed, less haste required! I've spent a bit more time on it and the above fork now acts more like the full site. The log shows at 0 and the start marker shows at load, as well as the incorrect colour var, and disappears on initial scroll. I hope this makes more sense and apologies for going round in circles!
  7. Thanks, I see my demo was not on point. It certainly is off at the start in there, on the full site it starts at zero. I've forked the demo to include a left margin on the slides so the start point is inside the viewport and included a log of where the carousel container begins (0): https://codepen.io/Cottonltd/pen/xxYdbaJ On my local site, with the markers on the 'vertical position' ones show at first load (see screenshot attached), but then disappear to the horizontal section as soon as you begin scrolling and then reappear in place on the horizontal section. Feels like it's loading that carousel section first before the rest of the triggers are applied?
  8. Sorry @GreenSock, kitchen sink demo as I wasn't sure which element may be causing issues. I've reduced it down to core now and the onEnters that may be the issue. I think I've narrowed it down to the following that seems to be triggering too early (line 93 in codepen): studysections.forEach((sct, i) => { const color = sct.getAttribute("data-color"); const seccolor = sct.getAttribute("data-secondcolor"); const textcolor = sct.getAttribute("data-text"); ScrollTrigger.create({ containerAnimation: hCarousel, trigger: sct, start: "left center", end: "right center", scrub: true, onEnter: () => { site_wrapper.style.backgroundColor = color; site_wrapper.style.setProperty("--copycolor", textcolor); document.body.style.setProperty("--secondcolor", seccolor); }, onEnterBack: () => { site_wrapper.style.backgroundColor = color; site_wrapper.style.setProperty("--copycolor", textcolor); document.body.style.setProperty("--secondcolor", seccolor); } }); }); Its just the css vars that appear to be a problem, the secondary colour change early too but the background-color inline style is fine. Perhaps it's not GSAP at all... It could well just be the containerAnimation problem, when you say 'pushed to the end' should I just call it at the end of the scripts or rearrange the DOM? Thank you.
  9. Hello I've got a site that when sections scroll into view the wrapper background colour is changed depending on the data-attribute on said section. There's also a horizontal scrolling section which also updates the colours as they scroll into/out of view. I'm using css vars to update the site text and menu/logo colours and these should be changed depending on the section data-copy attribute. However, this seems to update based on the first slide of the horizontal section on page load (there is a flash from black to white as you see the change on load), rather than as that section comes into view. The markers seem to be in the correct place so I'm not sure why this would be triggering on load. Is it something to do with using vars and setProperty rather than just inline hex, the ```site_wrapper.style.backgroundColor = color;``` seems to work fine and when scrolling backwards all is ok (but that is probably because the onLeave etc has been set specifically)? Thanks James
  10. It was this: https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ I think it was because there is an overwhelming amount of (good) info/explanation there, whereas the codepen you did was just like, ping!
  11. Hi Cassie Thanks for getting back, really appreciate it. Apologies it's taken a while to reply. This is a really lovely cloning solution. I tried to get my head around the meta-infinite scroll examples but it just wasn't sinking in. This is super simple! I've implemented the ScrollTrigger.create cloning the whole container of elements (because the site uses dynamic content and animation options/speed) which works great but the cloned elements aren't animating still. What am I missing? https://codepen.io/Cottonltd/pen/wvyaJGL
  12. Hello I'm working on a loop that clones a section as the previous section reaches the bottom of the page so it gives the illusion of an infinite scroll. I've got a forEach utility set up looking for all elements with certain speed classes to add a ScrollTrigger parallax effect to them. This works fine on the first 'master' element but all the cloned ones, while having the inline transform applied, don't animate. In the clone function I've included a ScrollTrigger.refresh(true); but it doesn't appear to have any affect. Any help would be greatly appreciated.
  13. Hi Jack I think so, it was just getting the scrollProxy on the go so will move on to debugging/fixing the rest now. I tried a couple of other 'infinite/clone scrolls' and came across this one that seemed to work the best. Happy for any pointers though!
  14. Aha, I think I figured it out. The [data-speed] animation was looking for the ScrollTrigger.maxScroll(window) and should have been the new scrollerProxy ScrollTrigger.maxScroll(context). It's broken the loop but least it's working with ScrollTrigger now. Rubber ducking 101. https://codepen.io/Cottonltd/pen/QWONKyL
  15. Hello fellow GSAPers I'm using a bit of script to create an infinite loop scroll of images and it essentially fixes the wrapper and allows the image wrapper to scroll while cloning the image elements. Now that I've got it working I'm trying to integrate ScrollTrigger using the ScrollProxy but I'm not sure what's going on. The script already has the getter and setter functions so I've tried integrating them into the default ScrollerProxy code without luck. It's my first time using the proxy outside of locomotive scroll etc so just trying to get my head around what it should and shouldn't be doing. Any advice/guidance would be much appreciated.
  16. Would you look at that! Thanks @akapowl, really appreciate the time spent tidying up my JS too.
  17. Hi Justin I went through this on this project and ended up having to use a clippath for the arrow shape and embedding the image in the SVG for this exact reason. The SVG is styled at 100% width and height and then the clippath is animated to get the zoom effect. The original thread is here and I've got it up on CodePen if you want to have a look/experiment. Hope this is of some help.
  18. I've created a scrollable 'carousel' that goes horizontal as you scroll. I'd like each slide as it enters to affect the .dot pagination that it corresponds to by adding an active class to it. The slide count is dynamic so I've added an individual id to each which is also added as a data-panel attribute to the .dots. Sure it's going to be something really simple but I can't see the wood for the trees so any guidance would be appreciated.
  19. Managed to get it working by using the trigger as the brand__panel and start: at 'bottom +size-of-header'. Thanks again @Cassie!
  20. @Cassie this is brilliant, thank you. I'm struggling to get it to work on the full site though, the header marker still sits at the top of the header elem on page load (not taking into account the size of the brand__panel). I've tried stripping everything out apart from what's in the Pen too but no luck. Could I confirm these are the changes you made: – Moved whole <header> inside the .brand__panel div – Added .last to an element – updated the header__wrapper scrollTrigger – Added position: absolute and bottom: 0 to the header_wrapper Did I miss anything?
  21. Hello I'm looking for a solution to allow me to pin the vertical bar svg to the top of the page when the .header_wrapper it is inside hits the top of the window. The markers show the function works but it doesn't seem to be taking into account the +=3500 end/pinSpacing of the 'intro' scroll so pins it too early. I'm currently trying to use a pin to stick the header to the bottom on load and have the end the same as the intro part but then once this is complete it jumps 3500px down. Essentially, I'm trying to stick the header to the bottom until the intro section has been scrolled through, then the content and header will scroll up until the header bar hits the top of the screen and then the menu icon will stick in place. I'm sure there is a simple solution or logic that I just need to get my head around but any guidance would be much appreciated. Thanks James
  22. Hi Shaun Apologies, the progress bar is probably more key than I had anticipated. I've added it's styling etc into the original pen. Essentially, the text wipes in after the progress bar has completed (on page load) so that is all part of the non-scrollTrigger part. It's only once that TL has played that the copy needs to be controlled by scrollTrigger. I tried adding the scrollTrigger into the progress_tl but it didn't work. Thanks James note: I've also changed the y:300 to y:100 to aid the pen being viewed directly in the embed.
  23. Hello all I've got a bit of an issue that I can't get my head around. I have some text that, on page load I have animated in (y & autoAlpha). Once completed and the user scrolls I would then like this same text to animate y & autoAlpha of the screen when reaching a certain point. Currently the intro works fine but then as you scroll off the elements just seem to disappear and don't reappear when you scroll back. Looking at the inspect it would seem the lines are given the initial y:300 transform. It feels like the two gsap animations are competing with each other. Any ideas? James note: Try the pen on CodePen rather than the embed to see it affecting more than just the top line
  24. Thanks a million @ZachSaucier, that's exactly what it was. I've popped the slide/fade anims after the pin trigger and all works well above and below it now.
  25. Hello I'm using the horizontal scroll example provided by Jack inside a pinned section which works a treat but I also have elements above and below that have fade/slide animations triggered as they scroll into view. The ones above the pinned section work fine but the ones below trigger early because the height of the pinned section doesn't take into account the width of the elements scrolling horizontally inside it: <div class="pin-spacer" style="flex-shrink: 1; display: flex; margin: 0px; right: 0px; bottom: 0px; top: 0px; left: 0px; position: relative; overflow: visible; box-sizing: border-box; width: 1632px; height: 2596px; padding: 0px 0px 1632px;"> <section id="fix-section" style="transform: translate3d(-270px, 0px, 0px); left: 0px; top: -0.40625px; margin: 0px; width: 1632px; height: 964px; padding: 0px; box-sizing: border-box; max-width: 1632px; max-height: 964px; position: fixed;"> ... ELEMENTS HERE ... </section> </div> The pin-spacer has the calculated full height of all the elements inside it (2596px) but the fixed-section only has the single contained element height (964px) so the animated items below fire once 964px has been reached rather than waiting for 2596px. I've tried making a pen of this but can't replicate so hope the above generated code is of use. Can I force the elements below to wait until the pinned section has ended? Thanks in advance.