Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

2,400 profile views

pauljohnknight's Achievements



  1. Oh OK. Yes I completely understand it'd thus be a pain to change. I'll have a play around with it and see what other possible options I have. The client does want to keep the original design so i'll probably go down the body overflow route because (I think) when I used a container div I was still getting the same issue. If I come up with another solution I'll post it on here for the record in case anyone else searches the forum. Thanks for you help and for coming back to me.
  2. Hi Jack, In the demo a horizontal scroll bar appears at the bottom of the window (screenshot attached) and lots of extra space is created (this is being caused by the pin-spacer which is sitting to right of the element). This only happens on smaller screens (roughly 1300px wide or less). Paul.
  3. As a hack/fix I've added a .pin-spacer {width: 0 !important} CSS line to my stylesheet , but there does seem to be a miscalculation taking place in the javascript/GSAP library.
  4. It seems to be the `inset` value generated by the GSAP pin spacer that is causing the problem. Could this be a bug?
  5. Hi, I have a layout where I have a search form wrapper element that when the user scrolls to the top it pins to the top of the viewport and a fixed div/bar appears behind it (in the CodePen this div is coloured grey so that you can see it). This give the appearance of a pinned header after the actual header has left the screen. This all works OK, but when I reduce the window size the layout breaks - this break is being cause by the GSAP `.pin-spacer` div. I'm not sure if this is supposed to align directly with the pinned element or not, but it's offset to the right of the element being pinned and I'm not sure how to fix it? Normally I would just add an `overflow:hidden` property on what is in this instance is `.home-section-2`, but because the search box and its wrapper are vertically aligned outside of this section it just cuts half of this element off. Any help would be fabulous. var fixedTopBar = document.getElementById('fixed-top-bar'), searchWrapper = document.getElementById('js-home-search-wrapper') var pinSearchBox = gsap.timeline({ scrollTrigger: { trigger: searchWrapper, start: "top 0", pin: true, pinSpacing: false, end: () => "+=" + document.querySelector('.home-section-2').offsetHeight, toggleActions: "restart pause reverse reverse", markers: true } }) pinSearchBox.to(fixedTopBar, {duration: .1, opacity: 1, zIndex: 2})
  6. Hi, I have a word made of spans where I would like them to stagger in when triggered by the scroll trigger - I can seem to get it play ball? The letters are having the animation applied to them, but the stagger isn't working? If someone could point out what I'm doing wrong that would be great. // 'MOVING' WORD var moving = document.querySelectorAll('span') if (moving) { gsap.utils.toArray(moving).forEach(function(letter) { gsap.to(letter, { duration: 1, y: 0, opacity: 1, stagger: .1, scrollTrigger: { trigger: letter, toggleActions: 'play pause none reset', start: '0 100%', } }) }) } Many thanks, Paul
  7. Thank you. I thought it was because you'd written the end value is a slightly different manner and it might have been an inbuilt method that was acting accordingly. Thanks for clarifying and for the original answer.
  8. Thanks Zach that works a treat. Can I ask how that manages to pin the section as well? That looks super useful, but I can't quite get my head around it
  9. Hi, I have a scrollTrigger animation when a section (.pin-section) hits the middle of the view port. This section is pinned for the same amount of pixels as the section height using end: () => "+=" + document.querySelector('.pin-section').offsetHeight During this pinning I have a star that basically keeps scrolling so the user knows to still scroll. This is done by using the .pin-section element as the trigger again and using the end: () => "+=" + document.querySelector('.pin-section').offsetHeight as the end value once again. As well as the simplified CodePen demo, I've also uploaded the page to a subdomain here: https://ia.inset.agency/production/ The issue I have is if I re-size or refresh the window after the animation has been triggered it breaks the animation. Note: The problem on the simplified CodePen version seems to happen if you resize the window when the animation is in-between the 'start' and 'end' markers, on the actual site link it seems to happen after the 'end' marker, but it's essentially the same thing happening each time. Also on the CodePen example it only happens on resize because when you refresh CodePen it seems to reset all of the positioning. Any help would be really awesome. // pin section in middle of screen var pinMiddle = gsap.timeline({scrollTrigger: { trigger: ".pin-section", start: "50% 50%", toggleActions: "restart pause reverse pause", end: () => "+=" + document.querySelector('.pin-section').offsetHeight, pin: true, markers: true }}) // parallax star var prodStar = gsap.timeline({ scrollTrigger: { trigger: '.pin-section', toggleActions: "restart pause reverse pause", start: '50% 50%', end: () => "+=" + document.querySelector('.pin-section').offsetHeight, scrub: true, markers: true } }) prodStar.to('.parallax-star', {y: -250})
  10. Hi Jonathan, I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox. Many thanks, Paul.
  11. Hi @Jonathan, @PointC, @Carl I have found a work around to this Firefox jank problem, but I'm not sure if it's a potentially terrible idea? On a localhost dev site I noticed the animations were very janky in Firefox for the reasons stated above in the thread, because of the nature of the animations, adding the rotation property, although improving things slightly in FireFox, didn't fix things completely (I also have a static rotation on an element being animated so this created other side effects). I noticed however that my Contact Page animations were all silky smooth compared to other pages, and the animations were virtually the same amount of code and with similar transforms / scale values etc? The reason it was animating OK on the Contact Page is because this page is a 100vh single section so everything apart from the footer is above the fold. On my other pages I wrapped the page content below the fold in a wrapper div, and in the JS file I set it to `display: none` for Firefox browser versions, and then used a setTimeOut function that switches it to 'display: block' after the duration of the animation, and hey presto everything animated buttery smooth. Below is the code I used: My main reservations are that: a) when reloading the page it will effectively always return to the top of the page, b) I'm worried there may be an SEO hit for initially hiding so much content, c) it just seems like a really terrible idea even though it works really well. Feel free to chip with any thoughts, I'm not particularly advanced with JS or GSAP, so would appreciate any comments var mainContent = document.getElementById("main-content"); var ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; if ( ff ) { mainContent.style.display = "none"; // SET TIMEOUT ON EVERYTHING BELOW SECTION ONE ON LOAD window.setTimeout(function() { mainContent.style.display = "block"; },2000) }
  12. Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly.
  13. Hi Craig, Thanks for this, that's great. I need to up my SVG knowledge. Also before I start playing around with this, I've just realised because the shape I'm morphing has preserveAspectRation="none" on it to make it responsive, I'm think you probably can't have an <image> in an SVG with this attribute because it will distort the image when you reduce the window size? I've done a quick screen cast and the image was going to go inside the main dark blue polygon that morphs in this video, but I'm thinking I may have to re-think by approach to this.
  14. Hi With the morphSVG plugin, is it possible when morphing between two path shapes to have it so that the final path shape can display a background image (say, with the SVG <image> that has been clipped so it fits the shape). What would happen is you'd have one path shape with a background that is just a fill colour, and this will then morph into the new path shape showing a background image. I'm thinking this probably isn't possible? I've set up a pen here of two shapes morphing in case it is possible and someone can illustrate how.