Jump to content
GreenSock

akapowl last won the day on March 21

akapowl had the most liked content!

akapowl

Moderators
  • Posts

    1,984
  • Joined

  • Last visited

  • Days Won

    98

akapowl last won the day on March 21

akapowl had the most liked content!

About akapowl

Profile Information

  • Location
    Germany

Recent Profile Visitors

10,489 profile views

akapowl's Achievements

  1. Sure you can. But getting that setup right has nothing to do with GSAP - it's just CSS styling. This right here is the seecond result of a google search for '3d perspective div with text'. https://3dtransforms.desandro.com/perspective https://codepen.io/akapowl/pen/PodvVGo
  2. Hello Pedro, your thought process with regard to that has a couple of issues. But before I start explaining, let me first mention, that your html element for some reason has a height difference of about 16px in comparison to the body element - I'm not quite sure why exactly that is the case, but it leaves a blank space at the bottom of that amount when the pinning is done, and seems to be to be a CSS styling issue related to your .sidebars__list element. To ommit that, I set the font-size of that element to 0px in CSS in my fork of your example, and instead set a fixed font-size of 16px to the .vertical-bar element. This feels more like a workaround for me though, so that is something you might want to look into. The first issue I see with regard to your animations, is that you are trying to use xPercent as the property to be tweened on for your scrollTween - that won't work because your individual panels all have different widths. That fake-horizontal-scrolling technique using xPercent will only work when each of your panels has the same exact width of 100vw. If you want to have different widths for your panels, you would have to tween on the x instead, and calculate things depending on your needs. This in your case can become tricky because of how that example of yours is set up - depending where exactly you want things to end e.g. you will have to incorporate a multiple of the width of your .vertical-bar elements into your calculations (and on top of that the padding-left on your .container - unless you set your elements' box-sizing to border-box). Additionaly for the calculations (mostly for those coming up) to be precise, you would have to incorporate the width of the browser's scrollbar because of how things are set up (and probably also need to be set up for this to work). This is the case, because while your vertical bars are positioned fixed so they align with their right side flush against the browser's scrollbar, everything else is dependent on 100vw or window.innerWidth, which both also include the space below the scrollbar in their value. That's why you will see a lot of 15 added or substracted throughout my example, because that's a value that worked fine for my browser with that regard - with different browser's that value might change though, and getting it right throughout all of them can become quite a pain. Same goes for the ScrollTrigger for your vertical bars - you will need to calculate where exactly to tween them to, when the start of that tween should happen and where it should end; including all things already mentioned in those calculations. The biggest issue I see in your thought process with ragard to that ScrollTrigger for the vertical bars, is that you want to use the vertical bar as the element to be animated and the trigger element for that animation - that won't work like you might expect because those vertical bars will not move at all, as your scrollTween is not referencing them in any way - it is the horizontal panels that are moving. If you want the bars to move in sync with their respective panel, you should use the respective panel as the trigger element for each bar. As you can see in the example below, everywhere dynamic values are needed, I make use of function-based values, so ScrollTrigger can get the correct value again when the window gets resized. For start and end of a ScrollTrigger that will work out of the box - for values used for properties of the tween to be invalidated on refresh, too, you will also need to add invalidateOnRefresh: true to the ScrollTrigger. If I got the description of what you wanted to achieve right, this fork of your example should resemble a setup that would work in a scenario as such. Although it is quite a bit more complex than you initially thought it might be, I hope this will help clear some things up. You can read all about the properties mentioned above in the Scrolltrigger docs and general docs for GSAP. I hope this will help. Happy tweening and scroll responsibly! https://codepen.io/akapowl/pen/xxaNyoe
  3. Hello @agsymonds I set to my example above to public, so you should be able to fork it now and tinker with it. In general, I really think that is more of a CSS styling question, than it has to do with GSAP. As you can see in this example below, GSAP does its job of splitting into chars just fine, when you remove the -webkit-text-fill-color: transparent; on the .span-gradient. https://codepen.io/akapowl/pen/XWPwaXK Albeit doing some quick searches, I'm not sure, if there is an easy way to apply a continuous gradient to multiple individual elements, which you would need in a scenario where you were to split by chars. So I went ahead and fiddled together a quick and dirty forEach loop that sets the backgroundSize of each character in the .span-gradient to the width of the whole span element, and offsets each character's backgroundPosition depending on the width of the characters that come before it. For that, in CSS, the gradient is now applied to each element inside the span, instead of the span itself. This should give you an idea for how to possibly approach it, if nobody else knows of an easier way to get that result - I'd be curious myself if there is. I hope that will be somewhat helpful though. Happy tweening! https://codepen.io/akapowl/pen/jOvombV
  4. Since you are going to be acting in an actual horizontal scrolling scenario unlike that demo of mine which was purposed for fake-horizontal scrolling, you don't even need any of the fancy stuff from that demo of mine. Just adjust the scrollerProxy, that Helper already mentioned, to also work with horizontal scrolling, by either exchanging all scrollTop values by scrollLeft or adding an extra part for scrollLeft alongside scrollTop, and then you can use ScrollTriggers pinning to achieve the result you are going for. Just remember to also set horizontal: true on the ScrollTriggers you set up because you are working with actual horizontal scrolling - then you can e.g. use a start value like 'left left' and an end value depending on how exactly you want things to behave. If you want it to behave like that demo of mine you posted, you will probably want to set pinSpacing: false, too. You'll find more information on all of those properties mentioned in the Scrolltrigger docs. Good luck!
  5. Hey there, Luca. So you want it to behave the exact other way around? Then you'd need to set it up the other way around. E.g. set the image to opacity 0 initially, either in CSS or in JS before the ScrollTrigger is created; and then tween it to opacity 1. If you are having problems achieving that, please post a minimal demo of what you have tried, so we can help you from there.
  6. It only appears to be centered in the end - it was not my intention to make it become centered - and I already gave you an explanation for the movement on the horizontal axis earlier. If you don't want your picture/s to move on the horizontal axis, switch the part that I added just for showcasing back to 0. That is btw generally more of a canvas related part and nothing GSAP really is responsible for, so it might be worth checking up on that. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#drawing_images
  7. As the Helper already mentioned, this forum isn't really for tutorial requests of any sort @NikzA - but in this case I remember Tom Miller crafting something quite similar together with Alex Trost on the Frontend Horse / TrostCodes Twitch-Stream. https://www.twitch.tv/trostcodes You can re-watch that episode over on Youtube - maybe consider giving them a thumbs up for their work or leaving a nice comment on the video. It's not infinite and doesn't have the exact same effect as the website you referenced (the logic for that is for you to implement then, heads up; it will likely not be the easiest thing to do) - on that website they are probably not even relying on native browser scrolling or native browser elements but rather listenening to relevant events like the wheel or touch in combination with WegGL rendering - but at the very least this should be a good starting point. Hope it will help, good luck! https://codepen.io/creativeocean/pen/gOvYEgq
  8. I'm pretty sure that happens, because when reloaded, the window/body/documentElement is not at the very top when locomotive-scroll gets initialized. From what I can tell, on its own, locomotive-scroll will always reload at the very top. I have seen some issues over on their Github where people were asking, whether it was possible to use scroll restoration with locomotive, or for the locomotive-team to implement it, but none of those I remember got a postive answer, if any. So my guess is, that it's just a thing, that is neccessary for locomotive-scroll to work the way it does (one reason I never really used it myself). And a way to work around the issue then would be to set your window.history.scrollRestoration to 'manual' and/or ScrollTrigger.clearScrollMemory('manual') Obviously your page will not reload where it was then, but at least it will be working - as I said, I guess it's very likely just a locomoitve-scroll thing. Does any of you get this updated demo to break? ...I couldn't. https://codepen.io/akapowl/pen/vYzVmVQ
  9. Because you are creating Errors, as you are not loading jQuery in your codepen, while there is code that relies on jQuery in that demo - again: check your console in dev-tools. Also, JS is only one third of what makes the page; and it doesn't look like you changed what I mentioned earlier about putting your canvas inside of your section and positioning it absolute instead of fixed, in your codepen either - don't forget about that. And then again, in your last codepen there are now only 58 images - that's why at the end there won't be an image visible, because your calculation doesn't match up with the length of the array. Best just swap out the number in your calculations with (images.length - 1). That way you won't have to adjust it and probably won't have to worry about errors with that regard, or an image not showing. // this... loadedImages[Math.floor(self.progress * (images.length - 1))].img, // ...instead of this loadedImages[Math.floor(self.progress * 59)].img, That works better now, right (even with your older jQuery version)? https://codepen.io/akapowl/pen/mdGzOJL
  10. Mitchel is right; but with regard to your ScrollTrigger, the jQuery version shouldn't make much of a difference anyway. I just tested and reverted back to your jQuery version used, and for me the demo behaves exactly the same and works as expected. Have you made sure, the index you are calculating is not larger than the largest index of your array (double-check the console in dev-tools); or maybe for some reason the last image is simply just blank/transparent? ...if you can not reproduce your issue in a minimal demo, I'm afraid I won't be able to be much more of a help than that.
  11. Hello, @bntratox, containerAnimation was made to make what you are trying to do a breeze. Have a look at it in the ScrollTrigger docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. For changing classes on elements, you could either implement logic of your own in the ScrollTrigger's callbacks, like you do with your console.log, or you could see if ScrollTrigger's toggleClass could be helpful for your usecase, too. toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following: String - The name of the class to add to the trigger element, like toggleClass: "active" Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).
  12. Sorry, but I don't quite understand what it is you are asking here. Could you maybe try and re-phrase or on the basis of a demo somehow make it clearer, what you mean? As you can see in this version with markers on and some spacing around that section, the exchange of the images starts and ends exactly where you have set things up; so I'm a bit lost here. https://codepen.io/akapowl/pen/VwGEvaN Are you saying, you don't want the canvas to scroll with the flow of the page, e.g. when the visible window is above or below that section? ...right now you have it positioned fixed, so that is what's to be expected. If you want it contained within your section, but still overlaying other elements, you should probably position it absolute in that section then. And if you want it to stay in place within a certain threshhold of scrolling, you could pin it via ScrollTrigger ( you can read all about pin in the ScrollTrigger docs ). https://greensock.com/docs/v3/Plugins/ScrollTrigger But again; I'm quite lost about what it is you're asking. Edit: Here is an example with what I mentioned above. https://codepen.io/akapowl/pen/GRXYqgV
  13. That is because you are trying to load images via http request on a website that is https secured (codepen) - that apparently won't work, and you get quite a load of console warnings in your dev-tools about that. I exchanged your images with lorem-picsum images, and push them off to the side here, just so you can see how the clearing of the canvas has an effect on the whole thing. If it wasn't cleared, the images that were drawn before would still be visible. onUpdate: (self) => { ctx.clearRect(0, 0, example.width, example.height); // <-- clear canvas before re-drawing new image ctx.drawImage(loadedImages[Math.floor(self.progress * 60)].img, 5*Math.floor(self.progress * 60), 0); // |pushing next image to the right| } On a different note: You arenot loading jQuery in your codepen, but it has references to jQuery, so I loaded that in for you, too. There is also a closing </div> tag missing for the .container in your demo; i added that in my pen. Furthermore, I added one more image to the array, so now it's 61 in total instead of 60, because when reaching the end, with how you have things set up in your drawImage() call, I was getting an error about an img not being found. That's because the array was an image short in that case as the last image you wanted to draw would have to have an index of 60 (progress being 1 multiplied by 60) but you only have 60 images, so the last index available would be 59. Does this work more like you imagined now? https://codepen.io/akapowl/pen/NWLOqYW Edit: Of course you don't have to add an extra image, but could also just limit your calculated index to 59 instead of 60. https://codepen.io/akapowl/pen/zYJmvWm
  14. Welcome to the GreenSock forum, @EVA CORPORATION With regard to the images overlapping each other; that probably happens because you are not clearing your canvas before re-drawing the next image, so it is more of a canvas related question than a GSAP one - you might want to have a look at the thread linked below. With regard to anything else, it is pretty hard to tell without a minimal demo that we can tinker with, and clearly see the issue in an isolated environment. On your website there might be several other things interfering and/or causing your issues, so it is not feasible for us to debug live websites - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. If you can provide a minimal demo, I'm sure your cahnces of getting help will be a lot better. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN
  15. Hello @UD123 You will probably need to use some sort of clipping or masking. There is a tutorial on Dynamic CSS Masks with GSAP over on codrops, maybe that can help. As the helper already mentioned, please keep in mind that this forum is not intended to provide custom tutorials on effects. Good luck and happy tweening!
×