Jump to content

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


  • Posts

  • Joined

  • Last visited

About iDad5

Profile Information

  • Gender
  • Location
    Munich, Germany
  • Interests
    art, sports (running, biking ...), single-malt, life in general

Recent Profile Visitors

1,458 profile views

iDad5's Achievements

  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.