Jump to content

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

akapowl last won the day on January 14

akapowl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on January 14

akapowl had the most liked content!

About akapowl

Profile Information

  • Location

Recent Profile Visitors

5,470 profile views

akapowl's Achievements

  1. Hey there, you'll want to use functional values alongside the invalidateOnRefresh to make sure ST does get the new value for the window's width on refresh. // change this x: -$( window ).innerWidth() // to this x: () => -$( window ).innerWidth() https://codepen.io/akapowl/pen/oNGRrYj
  2. I don't think you should be just pasting over the code from the example I mentioned over to your scenario. If smooth-scrollbar itself worked for you before (alongside ScrollTrigger), keep using it like you had in your scenario but change the variable that your smooth-scrollbar instance is stored to ( scrollbarin your case) when you add the eventListener for the markers. scrollbar.addListener(({ offset }) => { gsap.set(markers, { marginTop: -offset.y }) }); Other than that, I don't think I can help much more from just looking at screenshots. If you could create a minimal demo of your scenario, I'd be glad to take a look at it.
  3. Hey there @_josch That is related to how smooth-scrollbar works. If you take a look at the smooth-scrollbar example in the .scrollerProxy() docs, you'll see, it does have some extra code to handle that at the very end. That should resolve things for you - give it a shot. // Only necessary to correct marker position - not needed in production if (document.querySelector('.gsap-marker-scroller-start')) { const markers = gsap.utils.toArray('[class *= "gsap-marker"]'); bodyScrollBar.addListener(({ offset }) => { gsap.set(markers, { marginTop: -offset.y }) }); }
  4. Welcome to the GSAP forums @mccjo806 That issue seems to resolve, when you call your changeFlexGrow() in a function on the callbacks // this onEnter: changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) // vs. this onEnter: function() { changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) } https://codepen.io/akapowl/pen/xxXNNZz Also, since (as far as I know) flex-grow is animatable as long as its value is a number (and you already do so by using CSS transitions), you could also just tween it via GSAP. I'm not exactly sure what it is you're after, but as you mentioned scrubbing in the title, here is an example with a scrubbing tween instead. I hope this will help a bit. https://codepen.io/akapowl/pen/qBPGGqQ
  5. You could set once: true on your ScrollTriggers to get it working like that. https://codepen.io/akapowl/pen/LYzoEQr But given the fact that you are using timelines there, I assume you might have tweens associated with that, which you still want to be playing as usual. In that case I think it might be better to just add some simple conditional logic for adding the class onEnter 'manually'. https://codepen.io/akapowl/pen/PoJvwBM
  6. Oh, I see. Thanks for clearing that up. Yes, a minimal demo would really be helpful understanding the question better.
  7. Great, that you got it working! Be careful with the media-queries though; as it stands now, when the viewport width is exactly 1024px you will technically be creating both of those. Better make sure, the sizes don't overlap at some point, like maybe ... "(min-width: 1024px)": function(){ ... }, "(max-width: 1023px)": function(){ ... } ...
  8. what do you mean exactly? Defining globally the timeline with the options, but using create() on breakpoints? 😅 ...nah, please excuse that part - my brain must be in desperate need of coffee. For whatever reason, I thought you don't have any tweens associated to that timeline - despite the many many tweens you are obviously adding to it. That was just me, sorry. If you mean the scrubbing animation should only work once for the very first time you scroll down, but then not anymore when you go back up, you could take a look on these threads - they have some examples for how to deal with that. ScrollTrigger does have an immensely helpful .matchMedia() method that you'll want to take a look at for handling different ScrollTriggers for multiple viewports. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
  9. Hello Alessandro, you should be seeing an error in the console of your dev-tools, that gives you a pointer to what is wrong with your code - it is the section: any // bad gsap.utils.toArray(".section-animated-text").forEach((section: any) => { ... // better gsap.utils.toArray(".section-animated-text").forEach(section => { ... https://codepen.io/akapowl/pen/ExwJZPj
  10. Welcome to the GSAP forums @Poulpi Since I had an assumption on what that might be related to, I threw together some minimal demos on the issue you are having with just the relevant JS code of yours (from before you made that second post), I hope that is okay. Please keep in mind that generally it is out of scope for these free support forums to expect people to troubleshoot websites, as there is way too much involved with that - especially if there also are other 3rd party libraries in play. I believe since you were going for that non-pin-spacer-showing pinning type of effect, you were pinning the body, right? ...which would create a pin-spacer with everything on the page being inside of it. It appears that in that case the tiny-slider at the bottom will not be running - which makes me wonder, because the one just below the header looks like it is running just fine. Generally, I personally would advise on not pinning the body (although I do not know what exactly they were, I remember I had it come with side-effects once) - it will probably be better to create a wrapper around your content and pin that wrapper instead, if you can. If you wrap ALL of the content and pin the wrapper, the problem will still persist, which you can see in this pen - the slider further down the page won't auto-run. https://codepen.io/akapowl/pen/oNGOzNq You can work around that by only wrapping (and then pinning) specific parts (which might be visble at some point) for that non-pin-spacer-showing pinning type of effect, like here. As you can see, now the slider auto-runs. https://codepen.io/akapowl/pen/jOGRMBq I'm afraid I can not give you a porper explanation for the why of this happening, because I have no idea how exactly tiny-slider operates, but maybe give the suggestion above a try on your actual page and see if it does resolve things for you.# Just some little sidenotes (since you have those things in your code): If you don't have any actual animation associated with a ScrollTrigger but are merely just using it for pinning e.g., you could just use ScrollTrigger.create() instead of hooking the scrollTrigger to a timeline. toggleActions and scrub will not work together / on top of each other - if you have both set, the scrub will always take control. They actually are two different ways of controlling tweens/timeline with a ScrollTrigger. And lastly, there also isn't a repeat property on ScrollTriggers, as far as I know. I hope this will help. Happy scrolling! Edit: I really think it must be something with how tiny-slider works, because the funny thing is, in the iframe preview here and in editor-view on codepen, in both of the versions above, the slider appears to be working. But if you take a look in debug-view (without the codepen stuff around), the first of those will not work.
  11. You would have to adjust the logic a bit - and I think it should be enough to change the logic of the handleDirection() function. I changed ... // ...this... function handleDirection() { listening = false; if (direction === "down") { next = current + 1; if (next >= sections.length) next = 0; slideIn(); } if (direction === "up") { next = current - 1; if (next < 0) next = sections.length - 1; slideOut(); } } // ...to this... function handleDirection() { listening = false; if (direction === "down") { if( current !== sections.length - 1) { next = current + 1; slideIn(); } else { listening = true; } } if (direction === "up") { if( current !== 0) { next = current - 1; slideOut(); } else { listening = true; } } } ...and it appears to be working quite alright. I only tested with mouse-wheel though, so you might want to check for touch-devices yourself (and might have to incorporate some logic along those lines if it doesn't work well). Hope it helps a bit though. https://codepen.io/akapowl/pen/MWExqWb
  12. Hey @vsimak Since you said your codesandbox works straight up, the problems you encountered will likely not be related to that, but I noticed you were having an onStart-callback on that ScrollTrigger in there. While tweens and timelines do have those, ScrollTriggers do not - maybe you were going for onEnter there? As I said, it might very well not be the cause of your problems - just wanted to make sure
  13. Hello there, @Volt 22 As the forum guidelines state, we can not troubleshoot live websites, as there is just too much involved with that. If you do have GSAP specific questions and ideally post a minimal demo alongside your question, you'll immensly increase your chances of getting a solid answer and be helped. If you want to re-create the effect on that website you linked as a reference, I honestly don't think, ScrollTrigger would be the best tool of choice, as it very much looks to me, like they are not basing things off of normal scroll-behavior at all, but are probably listening to the neccessary events like mouse-wheel scroll, key events etc. and animate things based on those - similar to what these following examples do (one of them even has a very similar effect going on). Maybe they can help getting closer to what you want to achieve. Happy tweening! https://codepen.io/BrianCross/pen/PoWapLP https://codepen.io/PointC/pen/MzWzyv https://codepen.io/bassta/pen/kDvmC
  14. Hello @addam You sure can do something like that with the help of GSAP and its tools. In fact I think on that website they are using GSAP for it. Take a look at this post here... ...in combination with the example in the thread linked within. That could give you a good starting point. Besides the general setup for something like that, the most important thing you want to be taking a look at is ScrollTrigger Happy tweening!
  15. Welcome to the forums @Alessandro Serra A concept like this could work: First wrap the section in a div and pin the section itself with one ScrollTrigger. Then for as many toggles as you need, create ScrollTriggers using the wrapper as the trigger with the start dependent on its top and the amount of window-heights scrolled. Like in this example everything is dependent on the number of colors in that array. I'm not sure what exactly it is you are going for, but you can give it a shot and fiddle around a bit with that example. https://codepen.io/akapowl/pen/VwMqXZX