Jump to content

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

akapowl last won the day on August 27

akapowl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by akapowl

  1. I removed them because you had them a) in multiple places and b) on elements that you are translating with tweens on. As already mentioned by @GreenSock, that will throw things off. Instead, as suggested, I added the clip-path attribute on the group I created around everything related to the left eye - maybe that's the part you missed. This setup now only contains things related to the left-eye, so you will also want to create a similar setup for the other eye and maybe even clean it out a bit, too. <g clip-path="url(#N_EyeMask_L_clip)"> // <----- <g id="Face_Perturbed_11"> ... </g> <g id="P_Eye_L"> ... </g> <g id="Face_Normal_16"> ... </g> <g id="N_Eye_L"> ... </g> </g> No worries, I know how hard it can be. Just starting out with things can be overwhelming enough, trying to understand how everything works. Having a wall of code facing you will not be very helpful in that case - that's why it would be best to start small with just a handful of elements - something like in my initial examples - and work your way up from there, adding piece by piece and seeing what it changes.
  2. Hey @tpinne That can be a bit tricky, as you are pinning that #section-3, thus you won't be able to easily use it as a trigger as it will not be scrolling anymore. What you could do instead, is either use the #wrapper you have there as the trigger and calculate the start, taking the offsetTop of the pinSpacer around your #section-3 and all the pins before your #section-3 into account plus the way through to the chapter-3 animation on top of that ... trigger: "#wrapper", start: 'top top-=' + (document.querySelector('#scene-3').parentElement.offsetTop + 1000 + 1000 + 1000/5*3 ), ...or you could use the pin-spacer of that section itself as the trigger and calculate the start just based on the beginning of the animation of chapter 3. trigger: document.querySelector('#scene-3').parentElement, start: 'top top-=' + 1000/5*3, Since all your tweens for that pinning ScrollTrigger of that section do have an equal duration of 1, in any case the beginning of the animation will be the total scroll-duration of the pin (1000) devided by the total amount of all your tweens (5) multiplied by the amount of tweens before your chapter-3 tween (3), so 1000 / 5 * 3 Edit: I didn't check your calculation of the positionInScene3 before, but that would work too, with the pinSpacer as the trigger and a start: 'top top-=' + t3.labels.chapter3 / t3.duration()) * 1000 I also set the endTrigger and end to when that static-content of section 3 finishes in the example below - just in case that''s something you'd need too. Hope that helps Happy Scrolling. https://codepen.io/akapowl/pen/e135a62376e052aa849b64fea28ce099
  3. I'm pretty sure Illustrator has its reasons why it puts out things the way it does - like grouping things. It can not know what you are going to use the output for - and for animating often a rather specific setup is needed, that you will have to tweak yourself. I myself am not familiar enough with Illustrator for being able to give you any advice on what you could possibly do better there. As mentioned, it is pretty much that's going on in your demo. If you need assistance, it is always best to strip things down to the bare minimum showcasing what you do have problems with. Not only will it help you figure things out easier, but also does it help others figure out what the problem might be and how to possibly find a solution. And with lots of code, that can become quite cumbersome. Here is your example boiled down to just the left eye - and everything related to that wrapped in a group with the clip-path applied. I did remove all the other clip-paths set to other elements in there - unfortunatelly, I can not clean it all out for you, but a setup like this appears to be working as I would expect it to work. https://codepen.io/akapowl/pen/df10519493a5b3e5785ee9f2343d01c5
  4. Hey @Creek Yeah, there is a whole lot going on in your demo. Here is a simplified visualization of what @GreenSock was talking about; The clip path being applied to the .pupil path that has translations going on on it ... https://codepen.io/akapowl/pen/44cd429ebdc13474c804fc730569f571 ... vs. the clip-path being applied to the whole group of the eye - which works much better. Maybe this simplified example helps you a bit with getting yours sorted out. https://codepen.io/akapowl/pen/1c0aa1da32a863ffe4fdf3441e2c02aa
  5. Hey there @BarheimCoder There is; what you are looking for is ScrollTrigger.matchMedia() - it will handle that work for you. That could maybe look something like this in your case. Hope it helps. https://codepen.io/akapowl/pen/f02baa4689f87ef6259e344afd8f50b1 Edit: And if there isn't that much you want to change for different screensizes, as is the case in your demo, you can of course reduce your code down a bit by using a function with different parameters passed to create your ScrollTriggers for different viewports. https://codepen.io/akapowl/pen/5e46300a8c764b6b39437281be6ebd8c
  6. That means, that if after that pinning ScrollTrigger you create any other ScrollTriggers on elements within the container you are pinning, you will have to set the pinnedContainer property on those. From the ScrollTrigger documentation: pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0) There is an exmaple in this thread here:
  7. Hi Dipit, If you don't want the white-space (which is the spacing added by the pin-spacer) showing when pinning things like that, you'd want to consider wrapping all your content in a div and pinning this wrapping div instead. https://codepen.io/akapowl/pen/954ea945a4ec2db0f6aa8c35168c6f15 For any subsequent ScrollTriggers on elements within that wrapping div, you will then need to set the pinnedContainer property to that pinned wrap, as they won't have any pinSpacing to consider for their positioning (because they are inside the pinSpacer of the pin you created before) and thus will not get the correct values as you might expect, otherwise. Hope that helps
  8. As mentioned above; You will need to stick to the HTML-markup and CSS-styling from the demo for it to work in the first place. I am referring to the #viewport and #content elements here. <div id="viewport"> <div id="content"> ... </div> </div> #viewport { overflow: hidden; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; } #content { overflow: visible; width: 100%; /* set a height because the contents are position: absolute, thus natively there's no height */ height: 2400px; /* ... */ } Also it doesn't look like you are initiallizing the smooth-scroll anywhere, too. /* Setup: wrap your content <div> in another <div> that will serve as the viewport. Call this function FIRST (before you create your ScrollTriggers); it sets the default "scroller" for you (otherwise it'd be the window/body, but it should be the content <div>) */ smoothScroll("#content");
  9. Well the code you posted above is not from the ScrollTrigger-native smooth-scrolling approach - but trying to use smooth-scrollbar without loading their script. The ScrollTrigger-native approach does contain detailed comments in the JS for how to set up things for it to work - if you follow those ( and that includes the HTML markup and neccessary CSS setup ) you should actually be good to go. As mentioned in that other thread already, if you need assistance, please create a minimal demo. I'm not sure how else to help you without even seeing, how you are trying to approach things.
  10. Hello @SagarSurendhrababu If you want to use smooth-scrollbar.js for the smooth-scrolling, you will have to load their script in the first place. https://github.com/idiotWu/smooth-scrollbar But keep in mind, that it is not a GreenSock product, so these forums do not offer support for it. On the .scrollerProxy() documentation page there is also a ScrollTrigger-native smooth-scrolling approach though, that you could consider using instead. Happy Smooth-Scrolling
  11. Hello @SagarSurendhrababu - welcome to the GSAP forum. unfortunatelly it is close to impossible to give you any advice from just a code-snippet of your JS code - that's why, as you'll find in the forum guidelines, we ask for a minimal demo that showcases your issue in a reduced scenario. One first step for you to get closer to the culprit causing your problems could be removing things tween by tween from your timeline to isolate what exactly is causing it - my best guess would be that you are tweening things from a height of 0 to your set height and that might throw the calculations off for the ScrollTrigger - but this is just a shot in the dark and it could really be anything else, maybe related to your HTML markup or the CSS setup. So if you'd like some assistance on this, please create a minimal demo for us to take a look at and tinker with, ideally on a platform as codepen.io
  12. For the three bars moving on scroll, you'll want to take a look on the ScrollTrigger-Plugin, @kkkl With the right CSS setup in combination with a scrub-controlled scroll-triggered tween that should be quite straight forward actually. The bars could be positioned absolute in that second section for example and when that second section hits the bottom of the window (which would be a start of 'top bottom' together with an end of "+=100%" e.g. ) you could probably just tween them from their initial position in there to yPercent: -100. I'd suggest just giving it a shot yourself, as this actually feels like a good example case to get yourself started with ScrollTrigger.
  13. 🤦‍♂️ I Did not even think about the default margins on the paragraphs. Yes, that makes total sense, thanks for the clarification. And I wasn't able to reproduce it anymore with the changes you suggested. Thanks for chiming in 🙌
  14. Okay, it was kind of tricky to get to reproduce it, as most of the time it did work for me, but I think now I've got it. I got to reproduce it more 'consistently' (although not all the time) when dragging the scrollbar instead of scrolling with the mousewheel. Sometimes, when you scroll back up, the self.scroll() will not return 0 at the top of the page. Not sure if this is just related to the fact that the scrolling is handled on a seperate thread or this might indeed be a bug - maybe @GreenSock or @OSUblake can say more about that. But I found that the self.progress will return to 0 even if the self.scroll() will not, so you could just swap that out in the conditional check and you should be good to go. Give it a shot and see if it works for you. // change this... if( param - checkParam >= 1000 || self.scroll() === 0 ) { ... } // ...to this if( param - checkParam >= 1000 || self.progress === 0 ) { ... } https://codepen.io/akapowl/pen/84bf0d20cf5bac0d39196faa40a1dffe
  15. Nothing off the top of my head. It doesn't seem to happen within my demo, when I set the height and width of the body to 100% Could put together a minimal demo to look at?
  16. Well, you can extend the logic to whatever you like. There would actually be quite an easy fix to that issue. // extend this... if( param - checkParam >= 1000 ) { ... } // ...to this if( param - checkParam >= 1000 || self.scroll() === 0 ) { ... } https://codepen.io/akapowl/pen/9e2493513fa4691c0640a56ee3f36527
  17. Hey there, Mike! You could definitely do something like that within the onUpdate callback and the right logic. Something like this could work - not saying it is the idealest of solutions, but maybe it fits your needs decently enough: Get the scroll-position when scrolling down in one variable and compare it to the scroll-position when scrolling up in another variable. If the difference between those two variables is bigger/smaller (depending on how you organize the math) than a certain amount, trigger the animation. I set the distance to be covered to 1000 here, so it becomes more obvious. Hope it helps. https://codepen.io/akapowl/pen/5ba91c3ddc7ee9efd3719edca725f201
  18. Hey there @vadbiz Check this thread out - it asked for the same reference.
  19. Hye @lumuxd It looks like specifically setting pinSpacing to true here will give you the scrolling back. Usually specifically setting it to true is not neccessary, and this was just a shot in the dark after some other testing, so I can not even give you an explanation for that. Also it turns out your rotation: -360 in the tween only tweened things to about item 18, so I also adjusted that - not sure if this is the correct calculation for it as it was just trial and error and I did not have the time to dig into your code deeper, but it seems to work decently with what I got there now. Edit: Forget about the calculations. After some testing it looks like it just needs to be -720 instead of -360 to work with any amount of items. Hope I got it right this time 😅 ... and still hope this is still a bit helpful at least. Cheers https://codepen.io/akapowl/pen/8a327fc44a872640581d9c71bd6ddc89
  20. Hey there @tolka You can actually get away with one relatively simple timeline for this. First things first: In this example I added a rotation to your arrows, so they point down now and scaled them down a bit just so they will still be fully visible then. Also, I positioned them absolute, so they initially are stacked on top of each other, which will come in handy for the animating. This is what your timeline could then look like const arrowScroll = gsap.timeline({ repeat:-1 }); arrowScroll .fromTo('.arrow--down', { yPercent: 0 }, { yPercent: 100, ease: 'power1.inOut', duration: 1 }, 0) .fromTo('.arrow--down-2', { yPercent: -100 }, { yPercent: 0, ease: 'power1.inOut', duration: 1 }, 0) One of the arrows (as they are both in the same position now it actually shouldn't matter much, which does what) gets translated down from the initial position to below it, and one gets translated down from above the initial position to the initial position. Both tweens are set to start at the same time via the position parameter. Sidenote: If you want to repeat things inifinitely, you can set repeat: -1 (so you won't have to use large numbers for the repeats) And I see, that @nico fonseca already replied, too - so you see, there are different ways you can approach things. Happy tweening. https://codepen.io/akapowl/pen/18ec22fbc52642571cce664f5453f2c0
  21. Yes, as I mentioned, GSAP's ScrollTo-Plugin simply does not work with locomotive-scroll, so you can not use it when you use locomotive-scroll. Also you are trying to make use of jQuery syntax but are not loading jQuery in the first place. Here is a solution without jQuery using locomotive-scroll's own scrollTo method https://codepen.io/akapowl/pen/7fad2da08a4628a44511bfb7c79da891
  22. Hey there, @Pradeep PI Locomotive-scroll does not make use of native scroll behaviour and changes things fundamentaly when it comes to that. Thus it won't work with GSAP's ScrollTo-Plugin but instead has a scrollTo method of its own, which you can find more info on in their docs. https://github.com/locomotivemtl/locomotive-scroll As it is not a GSAP product, support for locomotive-scroll is not actually offered in these forums. There is a GSAPy smoothScroll() function with ScrollTrigger too though, if that's something you might want to consider instead of locomotive-scroll. You can find an example of that in the .scrollerProxy() documentation. Happy scrolling
  23. That is because since all those elements you have ScrollTriggers on would be withing that .wrapper then, which you are pinning, but have no pinSpacing to take into account for the accurate positioning. Setting a pinnedContainer: '.wrapper' to your .batch() would do the trick here. https://codepen.io/akapowl/pen/fae2755089adb45a5f3f55975a039768 From the docs: pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0) There will still be white space at the bottom of the page now though, likely because of the handling of the top - so I myself would probably still go the suggested y-translate route alongside an overflow: hidden on the .cardList.
  24. Hey @joq- welcome to the forums. That looks to be the case because in your CSS you initially position them 'top: 150px' - the trigger will simply just be set to where that top is. As it is better (performance-wise) to tween on y-translates instead of top anyway, I removed the top seting in your CSS and used a fromTo tween with a y-translate. Usually it's even best if you could avoid also tweening on the y of the element that is set as a trigger-element for a ScrollTrigger, too, as that can lead to other problems - but here things to work just fine that way. Does that work for you? https://codepen.io/akapowl/pen/f71f8225e4ca4dcd12041140a05300ee Edit: I think I totally misunderstood. What you are probably referring to actually appears to be the case because you have pinSpacing set to false. Is there a particular reason you need the pinSpacing: false?
  25. Hey @KivxD It could be as easy as calling a tl.reverse() in an onEnter callback of a ScrollTrigger. But depending on how and when exactly you want things to happen, the logic behind that could become more complex. https://codepen.io/akapowl/pen/b1d5b33091bf0c258f7784bba4c37c71