Jump to content

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

akapowl last won the day on November 30

akapowl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on November 30

akapowl had the most liked content!

Community Reputation

1,038 Superhero

About akapowl

  • Rank
    Advanced Member

Profile Information

  • Location

Recent Profile Visitors

1,157 profile views
  1. Yeah, i also think that there just might be a misunderstanding of how margins work in this context. They set-off your element by the amount you put on it - but in the box-model they are outside of your element itself. Since your ScrollTriggers don't have a start defined and thus the start defaults to 'top top', the pin will still start when the top border of your .section3 element hits the top of the window - the margin ( that is outside of that element ) will be scrolled past. Hope this makes sense the way I wrote it up. So the attempt mentioned by @GreenSock soun
  2. I wouldn't exactly call it brilliant, but thanks 😅 Brilliant is what we get given at hand with GSAP and ScrollTrigger (all the other good stuff not to mention). But knowing some concepts regarding JS is key when things get a bit more complex. I myself got to finally wrap my head around quite a bit, when working with ScrollTrigger.
  3. Hey @darkgr33n Those problems you encounter are related to 1) not storing (is it the right word to use here?) your timelines in variables 2) setting your variables without var / const / let beforehand, thus they are set to global scope and are eventually being overwritten Changing that accordingly results in where you wanted this to go. https://codepen.io/akapowl/pen/BaLNRjY Is that better? P.S.: Don't mind me changing your .from()-tweens to fromTo()-tweens - plus adding classes to your sections and
  4. I just suddenly remembered reading about it in a whole different thread some time ago 🤷‍♂️ Didn't come to my mind right away, because I actually never have been using it like that myself so far.
  5. Hey @mattdown Setting up a media-query in your CSS and using fromTo() tweens instead of your .from()-tweens is already making it work. https://codepen.io/akapowl/pen/bGwdgeX
  6. Well, I think it is just in the nature of how the scrubbing works, that it would jitter like that in your case. As Zach said above
  7. Hey @CoderJon If I interpret what you said correctly, this probably is, what you were referring to? (see video) To me it looks, like it is the scrub: 1 trying to catch up to the scrollbar, because with scrolling the element is being moved up but you are animating it down. Because the scrub is 'intending to 'lag' behind' the scrollbar, that's sort of problematic in this scenario, I think 🤔 0001-0600 - Kopie.mp4
  8. Hey @Ian F I already tried looking through all that when you initially posted, but I wasn't able to say anything that might be of help. And I don't think, that this will be the most helpful either, but by accident, I made some sort of observation just now. I barely even got the animation / timeline to play - maybe in one of 20-30 attempts. But I now noticed the following: If you're on that page of yours, hit F5 for reload, and instantly (it has to be really quick) after hitting F5 change over to a different tab in the browser; in 100% of all
  9. That happens wherever you are mid-scroll on that page and transition to another page. And I think that happens the exact time you kill the ScrollTriggers and it is simply just related to the fact, that all animations that happened thus far in combination with the ScrollTrigger will get wiped. I extended your controller.disable() function with tweens on the handgun, so it doesn't jump back to its untweened initial position, but animates to a state in between the killing and creating of the new ScrollTriggers - this is just copied from your renderer-home.js - so nothing I
  10. Hey @yeisonvelez11 If I understand you correctly there, GSAP's scrollToPlugin might be what you're interested in https://codepen.io/akapowl/pen/yLaLPEp Check the docs for more info on that https://greensock.com/docs/v3/Plugins/ScrollToPlugin Is this what you are looking for?
  11. Hey @flowen If you rip out everything that is related to the smooth-scroll library that you are using, you will notice that it works as intended. So it probably is an issue related to that and not to ScrollTrigger. https://codesandbox.io/s/magical-cherry-czdy9?file=/smoothscroll.js My guees would be, that the .disable functionality of that library is maybe not enough, and the instance would have to be completely destroyed and re-initiated instead when transitioning - but that is just a wild guess, because I don't know a thing about that library.
  12. Glad to hear, it helped That probably depends on what would work best in your set up, and what would be easiest for you to wrap your head around. You could for one do so by adding a timeline-animation with a staggered tween on the circles to that video-wrap-pinning ScrollTrigger. I had to add an empty tween with a duration of 1 on there, just to make sure the timeline had the right length for this to work. https://codepen.io/akapowl/pen/MWjwWGm Or you could loop over all your circles and for each circle creat
  13. Hey @Neomas I just andwered a question in the thread mentioned below on how to possibly prevent the callbacks from firing when clicking a nav-button. That demo showed the same behaviour you mentioned - the callbacks firing too, when reloading the page in a section further down, so I added a variable there to check wether the page is still 'settingUp' and then only fire the callbacks if that variable is false. That seems to work quite good and could be a possible solution to your issue, too. Check that thread here And here is the de
  14. Hey @blubububub You could integrate some sort of check on the callbacks to detect wether a button was clicked or not, and only if that is not the case, fire what's inside the callbacks of your ScrollTriggers. This way, they will only get triggered when not navigating the page via your nav-buttons. https://codepen.io/akapowl/pen/VwKLZQz Edit: You will also notice similar behaviour to what is mentioned in this thread though (in your demo), when reloading the page while you are in a section further down. So I also integrated a varaible