Jump to content

akapowl last won the day on January 25

akapowl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on January 25

akapowl had the most liked content!

About akapowl

Profile Information

  • Location

Recent Profile Visitors

9,845 profile views

akapowl's Achievements

  1. Posting your question once is enough, @Juan Munoz But I'm not sure what exactly you mean by 'responsive', as the example I posted above, should be fully working after resizes and there is nothing in it that would need recalculation of any sort. It would be best to add a minimal demo alongside your question, to make it easier to understand. Thanks.
  2. Once you have a proper layout set up, the GSAP side of things could look something like this; gsap.to(".theContentYouWantToTweenOn", { y: () => { return -(document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight) }, ease: "none", scrollTrigger: { trigger: ".someWrappingElement", start: () => "left left", end: () => "+=" + document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight, pin: true, pinSpacing: true, scrub: true, horizontal: true, invalidateOnRefresh: true } }); It's pretty much similar to what you can see with fake-horizontal-scrolling tweens in vertical scrolling scenarios, like the one shown below, except for all the x-related values being exchanged with y-related values and vice versa; additionaly you'll want to set horizontal to true on your ScrollTrigger, when you are moving in a native horizontal scrolling environment. Once you have tried something yourself, we'll be happily helping with the GSAP side of things you tried out and got stuck on - but again, please keep in mind, that these forums are not intended for requests á la 'please give me an example for how to do this effect'. https://codepen.io/akapowl/pen/dyvygmj
  3. Hello weinde, you are calling a function without passing any of the parameters neccessary for that function's logic to be processed, that's why you get that error. But also, nowhere does your code include anything related to GSAP, except for you registering the ScrollTrigger plugin. These forums try to stay focussed on GSAP specififc questions. If you have any of those, we'll be happy to help, but we can not provide general JavaScript or in your case also jQuery consulting.
  4. https://imgur.com/a/0IBWb7T Works just fine for me. Maybe you need to resize your viewing-window and reload, to make sure locomotive-scroll actually uses the transform-smooth-scrolling ? ...because as already mentioned, it will revert back to native browser scrolling when loaded below a certain window width. Which is also why you should not remove this line pinType: document.querySelector(".App").style.transform ? "transform" : "fixed" because that line makes sure that when locomotive-scroll reverts back to native browser scrolling, ST will use position fixed for the pinning. As your scroller is not the body, otherwise it will be using 'transform' by default, which will make your pins appear rather jittery when locomotive-scroll reverts back to native browser scrolling. Edit: My demo actually still does have some issues - with regard to things not working quite right on resize - but for the time being I don't have time to tinker with this some more.
  5. Well, as with everything, the devil is in the detail, which is why it is very hard to give general recommendations for a more complex scenario like yours. Since you are concerned about things not working when reloading the page when it's scrolled down, you might want to reconsider the general approach of how you implement the change of the backgroundColor, too, because the way you are doing it in the demos you posted, things will not work as you might intend in that case. One logical problem is the following: You are changing the playstate of pre-built timelines with.to() tweens in callbacks of ScrollTriggers, when the page is loaded at the very bottom, ScrollTrigger will make sure that those callbacks get called. So now you have multiple tweens being called quickly one after the other, which are all tweening on the same property of the same element, so you are creating conflicting tweens. When you scroll back up then, the .to() tween is supposed to be reversed, but it will probably reverse back to the color that it was at the time when that tween was being created - which very likely is not the color you'd expect but some value of a color in between all those colors. Creating your tweens upfront can be quite the tricky scenario to begin with, when you are going to tween on the same property of the same element with multiple different instances. So one way you could prevent all those logical hurdles, would be to create the tweens in the callbacks directly instead of pre-building them. Then you could either use .fromTo() tweens to make sure you always tween from one specific color to another specific color, when the callback runs, or .to() tweens with overwrite set to 'auto' to prevent conflicts I mentioned above. In this pen with the lottie-scrolltriggers handling the pinning themselves, things seem to work fine even if I create those ScrollTriggers before all the lottie-scrolltriggers, but your mileage may vary. https://codepen.io/akapowl/pen/gOjKLqy
  6. It's actually really hard to replicate in the first place because when refreshing the page, it doesn't always stay at the position it was before. Your latest demo for instance works fine for me every time - but I can see it starts up top when reloaded and then jumps to the position it was before later on. How about these two pens? (both are on the latest version - best fork them and view in codepen's debug mode) This one sort of represents your scenario - for each section there's one instance created for pinning the wrapping container and then later the LottieScrollTrigger instance for the animation triggering on the child of the container - I can recreate the issue you described there - all positions of the animation-triggering shift for me when reloaded at the bottom of the page e.g. https://codepen.io/akapowl/pen/jOpKqXW If on the other hand I only use the LottieScrollTrigger for both, pinning and triggering of the animation, I can not replicate the issue any more. Does that work for you, too, or can you still replicate that behaviour with this pen? https://codepen.io/akapowl/pen/abjKZwa
  7. Out of curiosity I was tinkering a bit and I noticed some differences in behaviour in between versions of GSAP/ScrollTrigger but I'm actually not sure if things that occured for me are those that you are mentioning. Could you check if this version of your codepen does behave any different for you? It is reverted back to GSAP and ScrollTrigger 3.11.1 https://codepen.io/akapowl/pen/VwBdKvv
  8. Hi there. Your ScrollTrigger is set to end 10,000 pixels after it starts - but since you are not pinning anything, you will never actually have that much height to scroll through on your page. So you might want to change something with that regard. In this fork of your pen you can see that ScrollTrigger actually works just like you tell it to, if there is enough scrollable space; I just set a min-height to the body to demonstrate that. https://codepen.io/akapowl/pen/dyjKGVX Consider having another look at the ScrollTrigger docs - with regard to end it might also be helpful to have a look at endTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger Also it sounds to me, that you actually want two tweens of a timeline to trigger at the same time, so you might want to have a look at how to use the position parameter of tweens on a timeline.
  9. Usually it is best to create your ScrollTriggers in order of the appearance of the elements on the page. ScrollTrigger needs to process the page from top to bottom, so ScrollTriggers further down the page have information about what is going on above, as layout might have been shifted before, which they need information about in order to calculate correctly, where to trigger. Imagine you have a forEach loop creating a bunch of ScrollTriggers for multiple sections on your page. Then, in your code after that forEach loop, you create a ScrollTrigger that is pinning something in between those sections - that pinning will cause the positioning of the elements that come later on, to shift. But since you have already created the ScrollTriggers for some of those elements further down the page before you created the pinning ScrollTrigger, and now in hindsight due to the pinning their position on the page gets shifted down, the calculations made by ScrollTrigger for those elements will not be correct anymore. See the problem? Of course often times it is more convenient to use loops and quickly itterate over multiple elements, but that often is where problems can occur, and that's what .sort() / refreshPriority are there for to help out with. Now again, I'm not saying that this is the cause of your issue - just wanted to give you a heads up on that, because it should be something to be aware of, when constructing your JS like you are.
  10. Hello @Palke - welcome to the GreenSock forum. I myself can not replicate the behaviour you mentioned with the instructions you gave - on Windows 11 neither in the latest Firefox, Chrome or Opera - so this might be something browser or OS specific. I think, adding some information about the browser and OS you are using might help the Admins find out what's causing that.
  11. Sorry, but no, I can't do that - that is a bit too much of a favour to ask. I'd keep it with what Cassie suggested; start with a blank canvas, add things to it piece by piece, test test test, and when things break, you will have a better angle on what might have caused it. Creating ScrollTriggers out of order of their appearance on the page (like especially inside forEach loops creating pinning ScrollTriggers) can become very tricky quite quick. I suspect, in a complex scenario like that, you might have have to consider the use of refreshPriority and/or .sort() in one way or another; but that is just a suspicion from a quick glance, nothing I can guarantee. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()
  12. Hey all. I think, using the string syntax for start / end with only one parameter, like you do throughout your codepen demo, @Gigi1303, is actually not valid ( as in e.g. start: "top" for instance ) and is bound to lead to problematic behaviour. You can use a singular value as a number (not in string form) and it will translate to the absolute scrollposition on the page or as a relative value in case of the end, like "+=100%". But other than that, when you use the string syntax, you are supposed to give two parameters, as in "top top" with the first referring to the element and the second referring to the viewport (as explained in the ScrollTrigger docs). Maybe try and change that in combination with the other suggestions you've already gotten, and see if it helps. For confirmation, here is @GreenSock mentioning this in one other thread (among many):
  13. You can find it in that other thread I mentioned earlier.
  14. Alright, I see. Then you'll probably need some sort of calculation anyway. Just for inspiration, here is an alternative. I make use of the endTrigger here, so I can use one trigger-element for the start and another trigger-element for the end. Also I get the values directly in the start function, so there's no need to re-populate any variable on resize. The calculation there is based on the padding of the section plus the offsetHeight of the subtitle + the 32px you mentioned you wanted in between the pinned elements. As a sidenote: I had to add a fixed height to the h2, as your h2s are empty and things got a bit wonky when pinning the intro element. Maybe this will help somehow. https://codepen.io/akapowl/pen/gOjzmmX endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.
  15. Update: I also tried to make an example that is a bit more condensed, to make it at least a little bit easier to see through what's going on there. @Rodrigo would you mind having a look at this if you find the time, to see if this is somewhat acceptable from the React side of things? https://codesandbox.io/s/gsap-scrolltrigger-with-locomotive-scroll-in-react-ux8nlv Worth mentioning on the side: Since elements and even whole sections kept disappearing on me when scrolling, I added a suggested sort of workaround to that known locomotive-scroll issue to the end of the styles.css