Jump to content
GreenSock

darkgr33n

ShockinglyGreen
  • Posts

    68
  • Joined

  • Last visited

Everything posted by darkgr33n

  1. Hey Jack, Thanks for highlighting that point, I had totally missed that there was a static method I could utilise as well. I just gave it a go and it seems to work and has saved about 20 lines of code! I might be able to optimise it a little more, but for now I'm pretty happy. https://codepen.io/darkgr33n/pen/MWbVooR Next step is to make draggable only available on mobile but I should be able to use matchMedia for that. Cheers!
  2. Just had a quick look at getting this working, but I think what I struggled with when I first saw hitTest was that the target element - the actual element being dragged - is actually a wrapper, and I can't see a way I can use hitTest as the child elements I need to effect are within the draggable target. https://codepen.io/darkgr33n/pen/rNWdxjW
  3. Thanks Zach that's helpful. For the mid-point, I'm assuming I'd have a div that's not visible, absolutely positioned in the center to act as the testObject. I assume I'm ok having three hitTests on one draggable instance, like I've done in my demo: one for onDrag - which adds a class; one for onDragEnd - which animates the element; and one for onDragStart - which clears everything ready for the next one.) ? Cheers!
  4. Thanks Zach, The end goal is for it to work as it does now, just a little more efficiently When dragging it needs to just add a class to each of the child elements as it passes the center point. If you end the drag while an element is on the center point, it needs to run an animation that widens the element. It will do other things, but I wanted to reduce the code to just the functionality i was struggling with. There will be text popping up and a video playing, but i just needed to nail being able to initiate some kind of action when dragging the child elements over the center of the screen. I'll give the hitTest a go and report back. Cheers!
  5. Thanks Zach. To be honest, I did see it but wasn't sure if it was entirely relevant in my case. Because I was targetting the child elements of the element I'm dragging I didn't think it would work and so I reverted to getting it working any way I could! So in theory then, I could use hitTest to effect the same behaviour. Interesting. I'll try and explore it and see if I can get it working in my case later today. Thanks
  6. Hey all, I'm trying to get something working on mobile that I have working on desktop. On desktop i'm using mouseenter and mouseleave to add a class and expand the width of a child 'slate' element. For mobile, the reduced screen size means I need slightly different functionality so I want to introduce the ability to drag the wrapper element and fire the same animation on the child element if the child is within 30px of the horizontal center of the window. Surprisingly I seem to have it working, however I'm not really sure if my method is over-the-top and I wonder if i've missed a much cleaner way of achieving what i'm after. I have 9 'slate' elements. On mobile, you'll probably only see 3 slates. The idea is you drag the elements across the screen horizontally, and as you drag if a child element hits the center of the screen, we add a class to highlight the element. If you end the drag with the element highlighted, it will then run an animation to expand the width of that element. In my draggable instance, i'm using three functions and this is where i'm unsure. each function has to loop through all the child elements to see if any of them is in the center - or highlighted - , so onDrag: function has to loop through everything as it's being dragged to see if the position of any of the elements is in the center of the window. if it is, it add a class to highlight the element. onDragEnd: function has to loop through all the child elements to see if we have a highlighted class added. If it does, it runs an animation . onDragStart: function has to loop through all the child elements to see if we have a highlighted class added. If it does, it reverses the animation. So the question is, does it seem reasonable to be looping over everything all the time or is there a simple method that I've totally overlooked that would achieve similar functionality. Cheers!
  7. Ah, gotcha! A quick experiment, but yeah I think that could be the way to go. With five items I was still getting a little movement on either end, but with 10, if it is there, its barely noticeable. If I can get the images and videos to work without affecting anything, we're golden. 💥 https://codepen.io/darkgr33n/pen/zYKbdLx Thanks for the clarification Cheers!
  8. Thanks @PointC, the demo and video almost did the trick really clear video actually; once this project is over I should sign up and go through some of the tutorials. Anyway, I've got it working without any errors and without messing around with mouse events. I went down the wrong road there I think! https://codepen.io/darkgr33n/pen/xxEBqNE The only thing, as mentioned above, is that when one expander is open and you move to an adjacent expander, the width of the overall block increases because the closing of the previous and opening of the current panels aren't synced. @ZachSaucier when you said that keeping the same total width was quite doable, were you referring to the demo that carl did and that this new pen is based on ? And, if so, was it the syncing of the reverse and play that are called when you move from an adjacent block what you were thinking ? Thanks both
  9. @ZachSaucier ooh, intriguing!! that does seem to be the crux of the issue. my very first attempt before I asked the question here was much simpler and was working except that the visual width of the container appeared to change as you hovered over multiple panels. https://codepen.io/darkgr33n/pen/gOwQQrm
  10. Just had a quick look and it could certainly be an option for me: However, with the site I linked to above, when you hover over multiple adjacent panels, the overall width of the block (of 10 panels) doesn't change. So if you kind-of hover and sweep across a few panels in the amended example ((https://codepen.io/darkgr33n/pen/wvzNQqg), it can look a little jerky as the parent container expands and contracts. I do actually like the organic feel it gives, but my client has been quite specific - perhaps I need to challenge her to think again...
  11. @PointC Hey Craig - thanks for that! No, I hadn't seen it, but will definitely have a look in the morning. I'm lost in mouse events at the moment and it seems close, but I really like the way the example you showed feels and could well be the way to go Many thanks!
  12. Hey Zach, Thanks for taking the time to look I was beginning to suspect it was more logical than a specific GSAP issue, but I wasn't sure if I was missing something GSAP-related that would solve it. I've been racking my brains all day. I've started looking at event.relatedTarget to work out where the mouse is coming from or going to and then trying to animate accordingly. I had started to avoid reverse as well during my experiments, but perhaps you're right - maybe i should just rebuild/simplify the layout a little. I actually based the layout on this site - which also uses GSAP to do the business - but while I can see what's happening with devtools I'm not entirely sure how it's achieved. I was half-aware of Flip but haven't looked at the docs yet. I'll have a look Cheers!
  13. Hi, I think I'm really close to getting this to work, and while I can almost understand what's going wrong, I'm not quite sure how to address it or if its down to a wrong approach or not. The goal is to be able to hover over each panel and to change width. I'm actually changing the width of an inner div as a pseudo-clip-path so that the content (image/video) doesn't scale. https://codepen.io/darkgr33n/pen/VwKgZOO SO, in the example, if hover over any panel without touching any of the other panels, all works well. However, if you hover over an adjacent panel, initially it seems to work but when you hover off things break down. Looking at the compiled code in dev tools, the translate to the adjacent panel seems to look ok, but when you hover off it's not completely reversing correctly. I'm using prevAll and nextAll to work out which way to move the non-hovered panels. I suspect something along the lines of the .to values get screwed up somewhere along the line. I tried a .fromTo version, which might be slightly closer as it doesn't leave gaps, but because it's a .fromTo, hovering to an adjacent panel manifests a big jump which looks bad! (https://codepen.io/darkgr33n/pen/poEGyBw); I've tried to work out a way to try and monitor the state of the panels, but as i said, I can't quite understand the whole picture to determine exactly what's wrong. It feels like I need to know if a panel is "open" before reversing or not not reversing the other panels that had moved as, in the .fromTo version, that would seem to be the only issue. Any ideas? Am I even close?! I think I've come quite far, but not yet far enough 😕 Cheers!
  14. Hey Zach, Thank you mate, again! Very much appreciated, and spot-on!! It does make sense to use a single timeline! Ignorance is the reason I had setup one for each. No reason for the pause - other than, as mentioned, I started by trying to get the hovered panel to be twice the width and then reversing on mouseleave and had copy/pasted when i was building the text timelines. Again, a lack of knowledge of the impact is at fault there Noted! As part of me trying to work it out, attaching the variables to the objects seemed to work better than what i had done previously, and i had looked at your replies to various posts and had pulled that through, without really understanding the impact. I've learnt loads since I started the first project, but my knowledge is rather patchy in places! I'm going to work on getting the hovered panel to expand to twice the width next so may be back with another question, but for now, thank you Cheers!
  15. Hi All, Second project! I'm creating a contents page that has 10 panels. When hovered, each panel needs to populate a single div below with specific text - which is currently inside attributes of the specific <section> (".Slate-item"). (Eventually, each panel will also increase in width and play a video on the hover, but one thing at a time!). I've 'almost' got it working, but there's an small issue, which I think may be caused by the way i'm structuring the code. The current iteration is the closest I've got to getting it working. The idea is you hover over the panel and three pieces of text are show, The first text -- "title" -- is effected by SplitText, and the other two -- "producer" abd "country" -- just fade in. The issue I'm seeing is, if I hover over each panel one at a time, it seems to work fine. If I quickly drag my mouse over a couple of the panels a few times and then stop over a panel, the "title" text comes in fine, but there's a delay before the other two pieces come in and sometimes they don't fade in, they just appear. I had seen a delay before in a previous iteration, and the more times I hovered over a panel, the longer the delay became, but I don't think that seems to be happening now. It seems reasonably stable in its wrongness! I'm not sure if it's because I'm creating the SplitText on the mouse event or if it's the structure of the code. I had hoped to get to the end of this without leaning on you guys, but i'm just not seeing where i'm going wrong at the moment so if anyone can see what's happening, I'd appreciate it. Cheers!
  16. ignore that, it doesn't work as you needed. apologies
  17. A quick update. I implemented the changes above across the site, with smooth scrolling and various combinations of "components" and everything is working pretty damn well!! 🥳 Thanks both for your help, much appreciated Cheers!
  18. @GreenSock@ZachSaucier Thanks Both! I had considered the unique ID point previously, but had somehow forgotten the basics during the hunt for what was wrong!! Many thanks, and love the ST array idea; I'll definitely use that going forward. Quick coffee, then I'll implement. Cheers!
  19. Thanks Zach, I did try to kill of the ScrollTrigger but struggled a bit. I can't use ScrollTrigger.getAll(); as there are other triggers I don't want to destroy. In the end, i've used ScrollTrigger.getById('cmpnt__ps').kill(); in the example (on the real page I'll have to list each trigger by ID, but there are only four). I've trimmed the HTML/JS/CSS a bit too! https://codepen.io/darkgr33n/pen/bGwwKme But i'm still getting the same problem unfortunately. Perhaps I'm not killing the trigger correctly ? I wrapped it in a block to stop the undefined error, so: if (ScrollTrigger.getById('cmpnt__ps')) { } and that seems to fire correctly - ie not on first load but after an orientation change. does the killing look right ? Cheers!
  20. Not sure if this helps, and I'm also not sure of how the durations are generated, but this kind of thing seems to work on initial test: let dur_green = 4, dur_orange = 2, dur_grey = 3; tl.to(".green", { x: 200, duration: dur_green }); tl.to(".orange", { x: 200, duration: dur_orange }, '>' + dur_orange - dur_green ); tl.to(".grey", { x: 200, duration: dur_grey }, '>' + dur_grey - dur_orange); initially, I had the dur_ variables set to 3, 1 and 2 respectively as per your example. changed to 4,2 and 3 and the end times are still aligned. although, on re-reading your post, perhaps this falls into the not-so-elegant category ...
  21. Thanks Zach, good shout. I've removed ASScroll and some of the styling. I think I'm only left with relevant bits I'd been looking at dev tools, and one difference I could see was within the pin-spacing attributes, but I hadn't looked too closely as I assumed that was a symptom of me doing something stupid! As it would appear on first look that I'm not doing anything obviously wrong, I can see that when the orientation fires and rebuild the spacing, it seems to miss the padding on the pin-spacer class. The declared height is always off by the missing padding amount. An updated demo without scrolling is here: https://codepen.io/darkgr33n/pen/KKggWWj I've run through two test cycles, one for each (landscape/portrait), beginning with an initial reload in one orientation, then doing the rotation, and then rotating back again. I don't know if it's helpful, but the code below shows the differences on each test cycle (and i've removed all other code not affected, so its just the initial few classes). <!-- LANDSCAPE TEST (667 x 375) Initial reload --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 736px; padding: 0px 0px 260px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* to portrait (375 x 667) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 771px; padding: 0px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); left: 0px; top: 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 771px; height: 771px; padding: 0px; box-sizing: border-box; position: fixed;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 47.1429%) translate3d(0px, 0px, 0px);"> </div> <!-- *ROTATE* back to landscape (667 x 375) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 680px; height: 529px; padding: 0px;"> <div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 505.531px; height: 505.531px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- PORTRAIT TEST (375 x 667) Initial reload --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 1056px; padding: 0px 0px 285px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 770.594px; height: 770.594px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* to landscape (667 x 375) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 476px; padding: 0px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 681px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* back to portrait (375 x 667) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 388px; height: 614px; padding: 0px;"> <div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 614px; height: 614px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> That seems like a lot to look at! In essence, taking the landscape test as an example, what I'm seeing is that: on initial reload <div class="pin-spacer has width: 650px; height: 736px; padding: 0px 0px 260px;" on first rotation to portrait: <div class="pin-spacer has width: 358px; height: 771px; padding: 0px;" on second rotation back to landscape: <div class="pin-spacer has width: 680px; height: 529px; padding: 0px;" I guess i'm expecting that rotating back to landscape (assuming i'm rebuilding the triggers correctly) it should be the same. Finally, looking at the portrait version I can see the pin-spacer above (first rotation) is different to how it appears on initial reload: portrait on initial reload <div class="pin-spacer has width: 358px; height: 1056px; padding: 0px 0px 285px;" so I can see on initial reload (which works) height is 1056px with the 285 bottom padding, but if we rotate from landscape into portrait, there is no bottom padding added and so the height is off by that amount. Maybe it's the way I'm handling the rotation, but the pin spacing seems to be different each time and i have no idea why!! Cheers!
  22. Hey all, I'm trying to cope with orientation changes. On a reload everything works as expected, but on an orientation change, not so much. I've read through a fair few examples, and have tweaked my code after reading @ZachSaucier 's animating efficiently, but to no avail. The real page has a number of components, but the codepen demo just shows one to try and keep the code minimal. There can be any number of these components, in any position on the page, so I basically loop through the <section> tags and see what class "component" they hold, and then build the scroll trigger then and there so they're always built in order. The orientation function seems to be firing correctly. I've tried a number of different methods to kill the trigger, clearProps etc, but can't see where I'm going wrong. Any ideas on what I can do to try and make sure the triggers are built afresh after an orientation change ? Cheers!
  23. excellent!! Thanks for your help Zach
  24. Thanks for the quick reply Zach -- I only realised as I got to the end of the question! OK, so I can get it to work if I do this: ScrollTrigger.matchMedia({ // please don't touch "(pointer: fine)": function() { ScrollTrigger.defaults({ scroller: '.inner' }) } }); Does that seem reasonable ? The whole ASScroll call now being: // ASScroll var asscroll = new ASScroll.default({ customScrollbar: true, disableOnTouch: true, scrollbarHandleEl: '.my-scrollbar-handle', disableNativeScrollbar: true }); ScrollTrigger.matchMedia({ // please don't touch "(pointer: fine)": function() { ScrollTrigger.defaults({ scroller: '.inner' }) } }); ScrollTrigger.scrollerProxy(".inner", { scrollTop(value) { return arguments.length ? asscroll.scrollTo(value) : -asscroll.smoothScrollPos; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight } } }); asscroll.on("raf", ScrollTrigger.update); ScrollTrigger.addEventListener("refresh", () => asscroll.onResize()); window.addEventListener("load", () => { var totalScroll = document.querySelector(".asscroll-container").scrollHeight - innerHeight; asscroll.enable(false, true, document.querySelector(".inner")); }); Cheers!
  25. Hey all (again!), I'm almost there (I think I said that about a month ago!), but have a small issue that I can't fathom. I've created two codepen demo's, but one could suffice if you comment out the necessary code between the <!-- ASScroll --> comments My issue only happens on touch devices. Chrome emulator seems to show the error, but I'm also on an iPhone which behaves the same each time. *note -- i'm only looking at landscape view at the moment -- not portrait. On desktop, everything is hunky dory, however on mobile screens the pinning isn't happening. When I set markers:true, I can see that the markers on the scroller move up with the page. I've setup ASScroll as per the demo, it's the same code, however I'm unsure if I need to create a proxy for every other Scroll Trigger instance as well (the demo shows just one component, but there are several, each with a different animation). https://codepen.io/darkgr33n/pen/XWjXGjJ the above demo (which seems to be at the bottom of the post for some reason !!) has ASScroll code intact. If you comment out the <!-- ASScroll--> section upi can see the effect -- or use this demo without ASScroll which works fine on mobile: https://codepen.io/darkgr33n/pen/ExgPMRg all other code is exactly the same in the two demos . When I first initiate ASScroll, I'm setting the DisableOnTouch opiton as "true" - which is the default - so I'm assuming that, on touch devices, ASScroll is not initiated. In my head, I'm thinking that means it should all work exactly as it would if ASScroll was not there - as per the second demo - however, as I've been typing this question, I've just realised that, although ASScroll may not be being initiated on mobile, I'm still setting the ScrollTrigger default scroller to ".inner", and setting up the proxy, and I have no idea if it's that breaking things on mobile, or a totally unrelated (and hopefully quick to fix) issue If anyone is able to point me in the right direction that would be very much appreciated. It could be as ASScroll issue but as it's working so beautifully on desktop I hope it's an easy fix! Cheers!
×