Jump to content

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


  • Posts

  • Joined

  • Last visited

About RobbieC

Recent Profile Visitors

683 profile views

RobbieC's Achievements

  1. Oh, well you do make a good point! I'll have to figure out how to work in your example, cause all of my scrolltriggers/tweens are already nested inside of individual functions, broken down into each section of the page, kind of like: function init() { // code code code // onComplete: () => initContent() } init(); function initContent() { calcStyles(); initIntro(); initProjects(); initClients(); initServices(); initInvest(); initInitiatives(); initCTAs(); initFooter(); } function initIntro() { // all tweens/scrolltriggers for this section // each init function is the same idea }
  2. Thanks Jack! I decided to try something a little different, my project is a little more complex than the example I gave above. This option I feel would work best for my situation, I just declare it at the top of my file: let startPosition; if (window.matchMedia("(max-width: 768px)").matches) { startPosition = 'top 80%'; // mobile } else { startPosition = 'top 60%'; // desktop } Then I just replace 'top 60%' on all my scrolltriggers with startPosition. I haven't fully tested it yet, but we shall see.
  3. I wanted to know if there was a simpler way of adjusting the 'start' position of a scrolltrigger, instead of using ScrollTrigger.mediaMatch and duplicating all the code to only change 1 line. Example: gsap.to(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 60%", end: "bottom bottom", toggleActions: "play none none reverse" } }); So if I wanted to just change "top 60%" to "top 80%" for max-width: 768px. Instead of doing: ScrollTrigger.matchMedia({ // desktop "(min-width: 769px)": function() { gsap.from(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 60%", end: "bottom bottom", toggleActions: "play none none reverse" } }, { // mobile & tablet "(max-width: 768px)": function() { gsap.from(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 80%", end: "bottom bottom", toggleActions: "play none none reverse" } }); It's not bad when its a simple single scrolltrigger, but when I have a project with lots of scrolltriggers and I need to adjust the start position for mobile on all of them, it will be a lot of extra code. Is there simpler/easier way?
  4. Thank you @akapowl !! I initially had my ScrollerProxy set to #viewport BUT I didn't define the scroller for ScrollTrigger, so it wasn't working and when I was searching online I came across an example that had the ScrollerProzy set to document.body and I gave that a try and it seemed to work but as you can see.. it didn't.. 😅
  5. First I want to apologize for the amount of code that's in my CodePen, I had to scrap it from my project and make sure I could recreate the issue. In my project I'm using Smooth Scrollbar & Barba.js but I didn't include the Barba code because I was able to recreate the issue without it (plus can you even use barba.js page transitions in codepen?) Anyway the issue I'm having is when you scroll to the end of the page (or to the end of the 2nd pinned section), then resize the window and scroll back up the "portfolio" section is missing. If you inspect element you can see that the "portfolio" section seems like it is still stuck in the pinReparent; which is below all the script tags BUT it doesn't make sense because if you inspect element and watch the two pinReparent's happen; once you get to the end of both sections, the sections leave the pinReparent state but once you resize the window the portfolio section jumps back into the pinReparent state. This issue only happens on a window resize event, so I'm not sure if it's an issue with pinReparent, Smooth Scrollbar or my code. Before I added Smooth Scrollbar to my project I only had the portfolio section and the only way I could get that section to scroll correctly with Smooth Scrollbar was to add the pinReparent. The same goes for when I added the zoom section into the project, it wouldn't work without it. I have tried to add a couple different eventlisteners but that didn't help. Here is the most recent one I tried on my project: let allTriggers = ScrollTrigger.getAll(); ScrollTrigger.addEventListener("refresh", () => bodyScrollBar.update()); ScrollTrigger.refresh(); let progress = 0; ScrollTrigger.addEventListener("refreshInit", () => progress = allTriggers.progress ); ScrollTrigger.addEventListener("refresh", () => allTriggersscroll(progress * ScrollTrigger.maxScroll(window))); bodyScrollBar.addListener(ScrollTrigger.update); I also tried to wrap it in a window.addEventListener and some different variations but no luck. Another weird thing is the word "TEXT" that's in the portfolio section; jumps up once the pin/horizontal scrolling starts. I'm not sure why it does it in the CodePen but is does not do it in my project.
  6. @ZachSaucier Can I ask if there was a particular reason why you used the backtick template literal on the scrolltrigger end property in your codepen above?
  7. Sorry that's because I left .offsetY in the code. I changed it back to the original code: end: () => container.scrollWidth - document.documentElement.clientWidth + container.offsetWidth} Now you should be able to see the issue i'm talking about.
  8. @ZachSaucier Sorry for the delayed reply, did you mean .offsetY? cause it returns NaN. I'm not using jQuery in my project, so I tried .offsetTop but that returns the value from the top of the page to the top the container which is like 15,000px which in return makes the endTrigger value like 17,000px which is way to much.
  9. There is also a few good tutorials/courses that cover smooth scrolling. Here is a few links: https://ihatetomatoes.net/get-bella/ https://www.creativecodingclub.com/courses/scrolltrigger-express I have taken both and they are great, I learned a lot and they both cover smooth scrolling with GSAP and/or a 3rd party library.
  10. I have a question/issue once again on this CodePen: https://codepen.io/robbiecren07/full/QWyKJMg The best way to see the issue im having is to view the pen in Full Page View, I created a spacer that is 900vh (to act like there is a lot of content above the portfolio section), when you scroll down and reach the portfolio section and once the scrolltrigger starts it moves SUPER fast like not even two clicks on the mousewheel and the scrolltrigger end. This shouldn't be happening and I'm not sure why. If you change the spacer-lg from 900vh to 100vh and run the code, you will see that once you get to the portfolio section it moves a lot slower and more natural. The more content/sections I add above the portfolio section, the faster the scrolltrigger moves in the portfolio section, I don't understand why or whats going on. Also on my project I have lots of scrolltriggers but this is the only one that is effected like this, which leads me to believe it has something to do with the the trigger and end trigger. Any input would be much appreciated, Thanks.
  11. I made the CodePen public, sorry about that (I forked one of my own private pens 😂). So I did what @Ihatetomatoes suggested and it works! I called my initPortfolioSec() function in the onComplete located inside the initLoader() function and removed it from the function init() list. (Just like the reply above) I updated it in my CodePen.
  12. No worries Jack. I wanted to start the thread before I logged off. I will continue to mess with it and see if I can figure out a solution later this evening.
  13. Good afternoon guys! I came across a little issue on my localhost so I tried to put together a workable Codepen. Basically I have a loader and then the main content in a wrapper in the <main> tag with the class: .is-loading #main_content { display: none; visibility: hidden; } The .is-loading class is on the body tag which I use gsap to remove when loader TL is complete. I know its the display:none that is breaking it because if you remove display:none from that class, the scrolltrigger displays and works correctly. The issue I have with just not having the display:none is that the user can scroll while the loader is playing and then once its complete the user will be somewhere else on the page. I don't want to use a scroll lock hack, so I want to try to use display: none. I'm guessing that I need to recalculate the scrolltrigger or tell it to execute a different way. I have tried using "ScrollTrigger.refresh(true);" a few different ways, but I have had no luck. FYI if you resize the window after the animation is complete, the portfolio section will appear but its broken and the scroll directs gets changed and only 2 images are displayed. Any feedback or guidance would be greatly appreciated.
  14. Thank you @ZachSaucier for the quick reply and the feedback. I will do this moving forward, makes sense and good advise - thank you! So I set width & height and also added the check if images are loaded, like you suggested and it didn't resolve my issue. The images are being loaded at the same time of the first painting. I also added "defer" to both my JS script calls and after checking the "Network" waterfall in Chrome, my images are being loaded fully before the JS file even loads. So I think I ruled out the issue being the images not being fully loaded before the scrolltrigger calculates. As I was typing this reply, I was messing with my JS files trying to debug it and create the issue on codepen, come to find out.... Its the order of my GSAP code in my JS file.... I was calling the ".hr" gsap code before the "portfolio" code... I guess what had me confused is that since i'm using: const line = document.querySelectorAll(".hr"); line.forEach((elem) => { gsap.from(elem, { duration: 1, width: "0", ease: "power3.inOut", scrollTrigger: { markers: true, trigger: elem, start: "top 80%", end: "bottom 10%", toggleActions: "play reverse play reverse" } }) }); and this ".hr" animation is being use in multiple locations on the page, I still need to make sure the order is correct and place it where the last ".hr" is actually being called in the JS file. So for this instant if I use the ".hr" before and after the "portfolio" gsap code, I need to be placing it after the "portfolio" code in the JS file.
  15. @GreenSock I have been messing with the the codepen you created for me above and I ran into a issue when i brought it over to my localhost. Once again i'm having trouble recreating the issue on Codepen so you could see it. I'm like 99% sure it has something to do with the images not being fully loaded before the scrolltrigger calculates. Here is the Codepen I was trying to recreate the issue on: https://codepen.io/robbiecren07/pen/c904f1e5295f3fb1864090bf680603ef I created a animated red line above and below the portfolio section that have markers enabled. On my locahost once I scroll into the portfolio section and the 3rd image starts to come into view, the trigger marker for the bottom red line comes into view and triggers, then once the portfolio section ends all the rest of my scrolltriggerd animations are jacked up. If you notice on the codepen the pin-spacer the height and padding are 5000px+, well on my localhost the pin-spacer height is 2000px and padding 1300px. I have tried wrapping the GSAP code in: function init(){ // GSAP CODE } window.addEventListener('load', function(){ init(); }); I have even tried what Jonathan recommended here: My pin spacer height / padding was still in the 2000px+ range. I also tested it on 3 different browsers and made sure the cache was cleared. I know its hard to debug anything with out a codepen showing the issue. So I will continue working on getting my issue displayed on the codepen. Until then, could you point me to another post or tutorial for integrating a imagesloaded or lazy load with GSAP? I have tried to use the lazyload codepen on the scrolltrigger doc page, I couldn't get it working.