Jump to content


  • Posts

  • Joined

  • Last visited

About cotton

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

cotton's Achievements

  1. Oh lovely, thanks @akapowl. Endtrigger is a great shout. Missed the H2 when I ported it over to codepen from the WP build, sorry about that.
  2. Thanks @akapowl, Essentially I'm trying to get the subtitle to pin to the top, then the intro copy to pin 32px under it and both stay pinned until the end of that section hits bottom (or the start of the next section comes into view). The subtitle is dynamic so that's why that height is being calculated, to ensure the intro is always 32px below the height of it. I actually had the recalculations being done in the 'live' version inside a window.resize function but had commented it out. The revert() seems to do the job I just need to add that if the copy content is larger than the height of the image column, or window, it should continue to scroll, or change the grid sizing.
  3. Hello I'm sure this will be something fairly straightforward that I've missed but have come up against it a couple of times before. I'm pinning elements on scroll but on window resize the start triggers aren't recalculated to the new screen dimensions so end up off screen/overlapping with other pins. Any thoughts? Thanks in advance
  4. Sheesh. Thanks @mvaneijgen, much appreciated!
  5. Hello I've got a foreach array that is triggering fine for the first iteration but not the second (or any consequent panels). Sure it's something simple but I've been scratching my head on it... Any pointers would be appreciated. Thanks James
  6. I think Safari requires your SVG with the moving elements to have a width and height in the CSS. I popped width: 100%; height: 100%; into inspect and it showed up.
  7. Hello I've come across this a few times on recent projects and would like to see if there is a definitive way of dealing with the issue, and if it is actually an issue. I tend to build modular CMS sites where the content editors can build pages in whatever order they see fit using those blocks. Some of the modules will have ScrollTrigger elements in so they can have pinned/animated blocks where they need. As I understand, the order that the ScrollTrigger functions are placed in the scripts has a bearing on how and when these pinned sections are calculated. Now, if I am allowing the client to add a pin section in a different location each time (i.e. sometimes it will come after a horizontal scrolling carousel, sometimes before etc) how can I make sure that the order the pins are created is the order they are in the DOM? I seem to get a lot of pin starts and ends being offset incorrectly which obviously then has a knock-on effect with all the other ScrollTrigger calculations. Is there a really simple way to sort this that I've missed? Perhaps a ScrollTrigger.refresh(); once all content is loaded or would that cause some unsightly visual issues? Should I be adding a script tag directly into the module template code rather than in a main js file so then it is called on the page as and when needed? I'd offer up a pen but all the elements work fine individually, just not always when the order is more dynamic. Thanks in advance
  8. I managed to fix it. I put the individual slides ScrollTrigger call inside the onEnter callback of the horizontal wrapper so it only fires once the slider wrapper is in the viewport. https://codepen.io/Cottonltd/pen/abYraKg?editors=1010 Not completely sure what the problem was however, must be something to do with the horizontal-ness and pinning?
  9. Hello Kind of following on from this thread, I'm getting an error where a section lower down the DOM is being triggered at the very top, on page load. To explain, I've got sections on a page which have colour attributes which are then used to change the background colour of the wrapping parent element as they are triggered. There is also a horizontal slider that does the same as each slide comes into view. However, on page load the first slide (orange), which is the 4th section down here, updates the wrapper background colour instead of the first DOM section. Is it because it's a pinned element so it triggers the onEnter when the page loads and if so, can I delay that or something? The first section works as expected when scrolling back up the page. If it makes any odds the final site will be dynamic/flexible/CMS so needs to work wherever it may be placed on the page. Thanks
  10. Great Thank you @SteveS. Nice a simple to implement too.
  11. Hello I'm trying to change the background colour of an element (site_wrapper) based on the data-attr of another element (section) that is scrolling. I've got it all working but would like to have the scrub affect the colour change rather than just animating the change onEnter. Any pointers would be much appreciated.
  12. 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.
  13. 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.
  14. 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
  15. 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?