Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by iDad5

  1. I'm not sure if I understand you fully. I assume that by viewport-sizes you refer certain/proportions of the window. You could use conditional statement depended on window.clientWIdth of height, you could work with window.matchMedia or try to set up you whole construction that all of that isn't necessary of only in certain cases.... Hard to say without an clearer picture of why you want what you wand. As basic example in code-pen would help.
  2. I'll see what I can find. But actually I don't understand why you cannot work with a png...
  3. First a question: Do you want your can to be fixes (stay in place) while scrolling, or should it scroll with the page? Also It would be good to know if anything else happens while the can fills and if the Page has other content one can scroll to unter/after the can. If I was you I would first try to build a timeline or a tween the animates the filling of the can. You have to decide if you can work with a PNG on top that has a 'hole', or if you need to work with a mask. That depends on the design you have in mind. Both is possible, working with a mask is (in my opinion) slightly more komplex, but not a big deal at all. I don't know ehat you skill-level with html/css/svg etc. is, but that might have an influence on how to tackle it.
  4. Hi, it seems you have cleaned up the HTML (at least I don't see any of the 'funny colors' OSUblake mentioned ). As far as I can tell by a cursory look at you JS, you can either use the current linkCallback function to do what you want, or ad an additional function outside the existing ones to handle that animation. Which one you prefer may depend on various things, but as it seems to me the script isn't entirely your own doing, I probably would go with a function outside the existing code, that is called every time a link is called. Let's say that function is called triggerAnimation To make it work, I would give the link that should trigger the animation a class or an id that relates to a certain animation. at the end of the existing linkCallback function I would call the triggerAnimation function with 'this' as parameter. Inside the triggerAnimation I would look for the class or id and then start the animation as needed. I don't know if that helps, but that could be one way to tackle it. Good luck! PS.: As the basic functionality of links currently often show new content, it might be that you have to think about where you want to show the animation. Inside the old content or the new, and then you will have to adjust your logic accordingly.
  5. Also as far as I can tell, while dragging in the original there is no movement/resizing happening inside the images. That will like impact the way the GPU can handle the layers.
  6. Actually it is a strange thing, it works differently in Safari and on Windows etc. it doesn't even work consistently after reloading in Safari on Mac sometimes. @skipper42 as well as my self experienced something akin to scroll pausing / blocking and it still 'feels like' most of the times I looked. It might be, that ist actually a fixed video container that is released after scrolling the (hidden) background for a while or it might be time triggered... Also I never thought that it wouldn't be doable (probably better) with. Old persistent guy I am I still would love to have a simple resistance parameter for snapping in scrollTrigger - despite the fact that it might be tricky if someone can do tricky with grace and ease it is @GreenSock
  7. @GreenSock You did understand my request perfectly, and I wasn't really expecting it to be easy. I don't know if you have taken a closer look to the op's original example of the iPhone site and the lidar video. In my mind in that case it adds a lot of value. We all try to use scrollTrigger to do engaging work - especially with the great scrubbing feature we have a great way of handing over contol to the user. But the attention span is what it is and to have the option to subtly take back control and tell a story within the story fells like an interesting option. But could be just me... The fact that you said 'could be' leaves a little hoe for me. I'm sure your concerns are valid, and I really don't know about the numeric scrub. I also don't know if I'll have a good use case sometime soon if so I'll probably try to solve it by using a temporary overlay that 'scroll-jacks' by taking the focus from the scroller. Thank you for your time and insights.
  8. @Cassie Thanks for the Example with the current label. That will most likely help a lot the next time I will want to use it in earnest. As I most often work with more or less encapsulated classes getting the reference to the timeline should be no problem. Still I would think that under certain circumstances it might be profitable to get it inside the callback directly like direction etc. Regarding resistance: You are right insofar as the snapping to the position is concerned. I was thinking about the leaving of the snapped in position (like in the iPhone-lidar video) In situations like these. or when you generally want to always snap forward and never back (one of the great feature that is already provided. as far as I understand) If would come in handy in my thinking if I could define a resistance against leaving a snapped in label/position, so that the user wont accidently leave a fixed position too easily. With a lot of modern devices it can happen quite easily to minimally scroll by accident (the apple magic mouse and a lot of touch-pads come to mind. Did I manage to bring my idea across?
  9. Is box 3 the last box in you setup? Then you just could kill the scrollTrigger? But a minimal demo really would help, probably ever a link to a more complex dev-sit could help understanding you setup a bit better....
  10. @skipper42 I looked at the iPhone Page and curiously it didn't do anything fancy for me on windows chrome, only when i looked on Mac Safari the magic happend. (Don't know it it's just me, or if the really do it way..) I assume you mean the lidar-section that 'pauses' the scrolling until the animation/video is finished. I'd thing that one simple way to do it that way is by snapping scrollTrigger to that section. And then blocking mouse/scroll interaction for the full-screen element e.g. with pointer-events:none and at the end of the animation remove that 'block'. (Pointer-events block most scrolling, body is an exception in parts....) You could do this by using two different scroll triggers and take the end of the first as start of the animation, it should also work with one scrollTrigger, as by letting no scrolling through to the scroller while the video plays it should not react. So disabling scrolling onSnap should be one way to do it. On the iPhone site however scrolling isn't fully disabled while the video plays. There is only a quite high scroll resistance as far as I can tell. That should be also doable one or the other way, but I can't think of an easy out of the box way right now. Would depend on the exact use case I'd guess. That leads me to two questions/feature requests for @GreenSock: Would it be possible to ad a resistance to snapping? So that only once the user scrolls a certain amount in percent of the animation or in pixels the snapped element / the whole scroller starts moving? (Probably catching up to the natural scroll position...) I love snapping to labels, but maybe I just looked or tried hard enough, but I would love to have an easy way to get the name of the label that has been snapped to onSnapComplete
  11. Not that I would do things like that at all. But I have to admit, that sometimes I wish I could have... Not very often, but it happens from time to time that a client (often connected to changes in management) want's to 'cut costs' and thinks that a junior developer could take over for less money, or an other agency wants to get into the project by under-biting me... I'm tempted to sue over my intellectual right that they give away to a competitor. No solution, and as I said it does not happen often, but still...
  12. I don't have any issue with pseudo elements, nor am I above using empty spans etc. it's just that in this case it should be very straight forward. A box that we want a shadow for, should be one line of css and one line of js to animate. As I said I did not want to criticise you at all - on the contrary. I just was saying that In this case there should in my mind be no need for anything...
  13. @Cassie used to to that often in the past, and I'm usually a fan of finding clever solutions like that over high power resource hungry approaches. But I this case putting semantically unnecessary <span>s in the page or building komplex pseudo-elements for a drop-shadow seems so 1990s. Sometimes I feel that we should not spent time and thought on working around limitations that really make no sense in todays browsers.... But that's just me ranting no critique at all.
  14. One follow up question: Do you have a version without the custom-scroll script that works, even if clumsy? maybe that could help narrowing it down...
  15. Ok, that seems plausible to me, also great fan that i am of @GreenSock I have my doubts about anyone else having more powerful magic to force rendering engines into submission than him. But it is possibel. But I think that with this further explanation the great ones might be able to help you. I will follow the thread and if I have more time on my hands I'll give it try myself.
  16. Without having worked through all you code and not even fully understanding what it is you want to achieve on small screens I'd like to share my way of (sometimes) tackling similar situations; If possible i work wit gasp.from tweens. The advantage ist, that i define the target position in css (with media-queries) anyway I want. The animation from the outside or from small happens than always to the given position the css. No need for queries and conditions in the js code that way. It ist surely possible and sometimes necessary to work with matchMedia in srollTrigger, but if complexity can be avoided I try to.
  17. Hi, I have looked at what you provided, and I have to admit, I didn't get far. I'm hopeful for you that some of the greater minds here will be able to help you, but also I'm rather sure this really isn't a gsap issue at the core. You mention three.js but as far as I can tell it's not (yet) used in the example you provided (?) - and if I do understand you, you think that the three.js part will only work with the custom scroller you've been provided with. I myself have only toed with the idea of using three.js but didn't really use it up to today, but from following the discussions here I'm 100% sure that three.sj works well with gsap including scrollTrigger. So I would think that probably it's a lot better to ditch the custom scroll code as scrollTrigger is a very powerful tool for most everything connected to scrolling and try to use it directly with three.js. This is just an educated guess, but using a powerful tool like gsap and scrollTrigger with another great library like thre. js should give you all the tools to do what you want putting the code that you 've been give in the middle seems to be more of a problem than a solution. Maybe if you could give the information what magic the custom scroller provides someone here can give you a hint how to accomplish ist without the drawback it seems to provide on top.
  18. Hope this isn't a dumb question... I totally forgot about the TextPlugin du to a lot of fancy newer stuff I guess, but I was remembered by a question here yesterday - and as it happens I had the 'idea' of using it to expand text . I would like to have the first one or two sentences on the page and depending on some action i would like to show the rest word by word. As far as I can remember and read in the docs, the TextPlugin only replaces one text (or none) with new text. Is there an option to start at a certain position or have a certain length not changed. (The text ist provided by the System in one container and and for semantic reasons and due to unknown width and different views on different devices I would prefer not to start with the expanding text in a different container, but I might go down that route...)
  19. You don't have to use toggle. Try onEnter
  20. You could try filter: drop-shadow is has some limitations compared to box shadow but usually has better performance.
  21. Hi, I think Jack's advice ist brillant as almost always. Especially if you need it to be flexibel, responsive and the circle has to be moved along the path etc. If you would in fact only need what you described an click on one element (the stepper) moves another element to a certain position (and scale) as a beginner I would probably try it by going a less elegant way, like writing 5 functions like function go2Pos1(){ gsap.to('#cricle', {x: 300, y: 200, scale: 1.2 ....}); } function go2Pos2(){ gsap.to('#cricle', {x: 350, y: 150, scale: 1.5 ....}); } etc... document.getElementById('#stepper1').addEventListener('click', go2pos1); document.getElementById('#stepper2').addEventListener('click', go2pos2); .... And I'd attach those functions top the clickEvent of the steppers (and probably to the target zones). Not a very elegant war to do it, no path following etc. but easy to write, and debug. You could go for arrays and loops but it may be easier to individualize the animations manually as a starting project. In the end it depends a lot on your general skill level and the number of steps you have... If for example you have to scroll the background to go to positions deeper down you could simply add: function go2Pos1(){ gsap.to('#cricle', {x: 300, y: 200, scale: 1.2 ....}); gsap.to('#container', {scrollTo: {y: "#target1", offsetY: 70} ....}); } (Don't forget to load the scrollTo Plugin) in that case. I know, not very elegant but as a starting point / playground to get a feel for gsap animation basic it might help.
  22. First: Thank You @OSUblake interesting article, still in the end I decided not to go down that road or any other 'solution' to this problem for several reasons, some of them I'll talk about further down. For my own reference and hopefully for others that run into similar problems I'll try summarize my findings here and would be grateful for further insights: I identified 3 main factors contributing to my problems: Performance problem with the blur filter Inconsistent handling and reporting of the viewport height - due to the hiding of the address-bar Scroll acceleration and deceleration on touch devices Performance problems with the blur filter on very recent high powered devices like the 4.gen iPad pro and and the iPhone12 ProMax took me by surprise. And I'm still not sure if that filter itself has a performance problem, as i looked very fine. But OSUblake's excellent suggestion 'solved' it for me (even though the warning on MDN makes it feel a bit hacky). Still I wonder if the new M1 iPads have the same problem or even worse the new M1 macs? (But that brings me to the testing dilemma, I'll elaborate on that in the end of this lengthy post..) Also I suppose that the problem is not in and of itself the cause for my troubles but in combination with point number 3. Hiding of the address-bar is a pain in the ... by its' own rights. There are several ways to tackle it like the one linked in the article above (again thanks to OSUblake); determine the height with address-bar through body.height() and the one without it through 100vh and doing some guesswork; etc. But that guesswork is just that. I did not find a way to find find a consistent way to predict or retrieve the moment when the address-bar goes away. Not even for one device on one OS. It does not go away when scrolling programmatically - it does mostly when scrolled by touch, the behavior is inconsistent with the keyboard and touchpad and it seems it even to make a difference if you recently disconnected the tablet from those input devices... Also, the hiding-behavior through touch is different once you scrolled programmatically before scrolling through touch. Older and or other browser and OS versions reportedly do have other behavior. A total clusterf... (please excuse my French here) and seeing the beta of iOS 15 where the whole browser-chrome-affair goes in a totally different direction, I decided that in my case - I live with it. But even if at some point there would be consistent behavior and/or reliable event(s) that gave us a theoretical chance to know when what is happening, I guess that reflowing/resizing the content while scrolling would be (logical) hell anyhow in most cases. Scroll acceleration and deceleration - as mentioned above even on one device the behavior is hard to predict depending on the environment and the input devices. Also consistent testing is not really possible even with good muscle memory The problem I perceive btw. is with snapping: On the desktop when I over-scroll (regardless of the method - too much acceleration or just plain dragging too far) over a 'snap' - it snaps back and rests. On the iPad very often it seems as if even after snapping there is 'residual scrolling speed' and it scrolls again after snapping (onSnapComplete is fired already) an id snaps back again, sometimes more than one time. I wasn't happy with it but I felt in my case it does not hurt to bad, but I imagine that in some cases it can really be a problem. Has anyone found a solution for that, or am I mistaken that a problem exists there? Side-note on device-testing in general: Nowadays I work mainly for small and medium sized clients and there is hardly any budget reserves for device-testing. Still if the site has problems on the bosses/cousins more or less exotic devices it is expected from me to fix it... I guess I'm not alone with that problem, and I do try to test and fix as best I can. I have several iPads and iPhones and some older android devices but testing, let alone debugging on those is not only time consuming but also often nearly impossible. Also from time to time I have to / ant to install a beta of iOS on my 'ready to use' -devices, which has it's own drawbacks, but also it's advantages. Keeping around a lot of current devices purely for testing not only is very expensive, it also feels like by the time you are trough with all the testing, optimizing and retesting for side effects, the site needs a redesign already ;-). How do you all handle this, if I may ask, looking for inspiration or at leas some confirmation. Thanks for reading.
  23. Thank You @OSUblake I couldn't fathom that ist would be a performance issue with those devices, generally he are quite capable and often a lot faster then my years old MacBookPro... will-change actually helped though... There still is some kind of fringe behavior with the way scrolling on i-Devices work with the acceleration and deceleration and also it is toublesome that 100vh isn't reliable due to the way the address bar works (and calc() with -webkit-fill-available doesn't work) but I guess I can live with that behavior for now. https://stackoverflow.com/a/37113430/6078346 has bad news for me, or is there a workaround, as this might be a tricky problem in a lot of scrollTrigger use-cases...
  24. Hi, I feel like I'm on thin ice here, as I really don't want to sound condescending or anywhere near it. I work with WordPress a lot, and (for a lot of reasons) I try to avoid Elementor... But that's not the point here. I just wanted to ask for your 'workflow', as I have the strong feeling that you will have a very steep learning curve trying to handle you problem the way you do right now. There may be very good reasons to takle it that way, but sometimes - in my experience - it is worth taking a step back and evaluate if changing you approach would help you solve the problem at hand better. My reasoning is, that for one Elemetor was meant to work "without coding" (which often is wishful thinking once you want things you way - ) so maybe you could keep Elemetor out of that particular peace of you template? The other thing is that Elemetor is fighting (as far as I can tell) an uphill battle against evolving Guttenberg and know-how built up for Elemetor might be for naught soon. Of course there might be a million good reasons to go exactly the rout you're trying to go, but if some of my reasoning sound interesting to you, changing the approach might be worth a thought.
  25. Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!