newguy123
Members-
Posts
127 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
newguy123's Achievements
- Rare
- Rare
Recent Badges
12
Reputation
-
newguy123 started following useGSAP + ScrollTrigger + ScrollToPlugin bug? , Zoom in effect made with gsap? , scrollTrigger pin scroll stops and 3 others
-
To elaborate on what Mvaneijgen already said: The "zoom" affect is likely done with GSAP, ie the scroll is tied to the threejs 3D camera or path and on scroll it animates the camera or progress it along a set path, or it may also be animating the A mesh itself relative to the 3D camera. As they like to say GSAP can animate anything. In this case it animates things in three js 3D scene.
-
@Cassie this is super hard to troubleshoot If I go back to a previous iteration of my page in the iframe, then everything works fine In my new page, where things dont work, I have the exact same content except I move some things around to be included inside my pinned container Other than that its the exact same page In my case, the 1st part of my scroller scrolltrigger page, is a regular fullscreen div, not part of the scrolltrigger animation. As you scroll, this 1st part scrolls out the page. On top of this, I have a timeline with buttons, which scrolls to labels in the scrolltrigger. That was the initial page Only thing I changed in the new page, was moved my fixed timeline out from its own, and stuck it into my pinned container, so it can scroll out of view when I hit new stuff at the bottom. I may be blabbing on here, as I have too much code to share, but I will attempt to take that 1st part that seems to be causing the issue, out of the regular scroll, and make it part of the scrolltrigger animation and since its right at the start, I will animate it up out of view in the scrolltrigger to simulate the regular scroll. Hopefully that works around the Chrome bug, will let you know later! EDIT2: Nope removeing it out the general flow if things didnt help
-
Just came across this!!! I thought I was starting to go nuts. I was roubleshooting my site left and right up and down, adding pointer events, removing it. Turns it its this Chrome bug!!! As soon as I stick my page in an iFrame, thigns go odd with the Scrolling, only in Chrome Glad to see its not me and not GSAP!!! So frustrating!
-
Iphone Low power mode animation flicker issue on single hold scroll.
newguy123 replied to codechirag's topic in GSAP
where do I put this in a react app? can I stick it directly after registering plugins after importing it, like so? gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin); ScrollTrigger.config({ ignoreMobileResize: true }); ? -
let us know what value ends up the magic number for your specific video if 23 was stuttering, try 24, 25 , or 26 The higher you go, the smaller the filsize, and may start 'working' on some point on android. Probably also worth noting there's not much point in having 1080p video for this sort of thing unless its only few seconds. So for longer videos, try lowereing the resolution to 1280 or 960 even. There's a balance between absolute bad quality and trying to make it work on ALL devices. At some point you may have to sacrifice resolution or quality or both. You can also make your logic so on desktop it uses a higher res video with crf 22 and on mobile lower res with crf 24 or 25 for example... This bit in the ffmpeg command will keep aspect ratio and scale your video to 960 wide: -vf scale=960:-1
-
I have a React web app with scrolltrigger. There's a bunch of things to load on page start so I added a fake loading screen However I dont want the user to be able to scroll while the fake loading div is shown. Is it generally a bad idea to lock the scrollbars, or its perfectly fine with scrolltrigger? Something like this: import { useCallback } from 'react'; const useScrollLock = () => { const lockScroll = useCallback(() => { document.body.style.overflow = 'hidden'; }, []); const unlockScroll = useCallback(() => { document.body.style.overflow = ''; }, []); return { lockScroll, unlockScroll }; }; export default useScrollLock; EDIT: I tested it and it seems to work fine. Just want to double check if there's any gotchas I'm not aware of or if in general its not a good idea to do this when using Scrolltrigger.... ?
-
How to correctly implement ScrollTrigger normalize scroll
newguy123 replied to stefanobartoletti's topic in GSAP
oddly enough, I read the docs and see the reasoning behing the feature, and some workarounds to make it work better on iOS Weirdly, in my tests, I get the opposite effect, ie it works fine on iOS without it, but when I use that feature, things go weird on iOS for example, I start to scroll down, then after a second or so, it jumps back to the top. Unfortunately I cant show a pen or anything for this, it was more of an observation on my project, more than anything. -
I've actually been doing some research in this recently as we've done a bunch of these types of projects recently, and I've come to the conclusion it depends on the lenght and resolution of the video. At some point, there's a bit of a tipping scale and android starts falling over, even on high end devices, where iOS keeps playing no matter if its an old device or new. What you could try is adjust the CRF value. The command above mentioned 23. Now your milage may vary on this as I say depending on video lenght and resolution, but you can try values between 17 and 28, with lower values giving better quality, but also affects the fielsize. Higher values gives you worse quality, but also affect the filesize. Try and find a value that works for your specific video. Values between 17 and 28 are sane values. Any lower or higher and you wont notice a difference in quality much, but the filesize will be huge difference. I would almsot suggest to stay between 20 and 26 actually... If on the othr hand, you only have a handfull of frames, then maybe image sequence will serve you better
-
How to correctly implement ScrollTrigger normalize scroll
newguy123 replied to stefanobartoletti's topic in GSAP
sorry to bring up this old thread, but.... where do we put this in a React app? Can I just stick it in direcly after my scrolltrigger import and after the register the plugin, like so and that's it? import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin); ScrollTrigger.normalizeScroll(true); const App = () => { ..... ..... ..... } export default App -
so simple: invalidateOnRefresh: true, awesome, thanks a mil @Rodrigo!
-
While the browser is maximised, click on 40% and the red dot goes where its suppose to, like so: However, now make the browser window smaller, and the red dot drifts off the 40% mark like so: Whats worse, now if you click on 60%, the red dot is way of the mark! If however I refresh the screen, the red dot jumps back to 0, and now when you click on any % it goes to the correct place, that is, until you resize the window again I tested this in Chrome as well as Firefox
-
Thanks @Rodrigo, using a fork of your fork, I adjusted things so there is a red dot to indicate the current position. However, now there is a resize issue. If for example you click on "40", then the red dot indicator correctly goes to the 40% mark, however, if you now resize the browser window, it drifts and doesnt stay in the correct location. This also then affects it's postion if you click on other percentages. It only corrects itself after a full page refresh. I tried adding in some eventlistener for resize and refresh just the scrolltrigger, but I was not successful in fixing the drift issue: Here's my new pen: https://stackblitz.com/edit/react-m7brzt?file=src%2FApp.js I suspect its not just desktop window resize that causes the issue, but possibly also when your keyboard is shown/hidden on mobile or the address bar on mobile is shown/hidden, since that it is sort of a window resize too
-
Thanks @Cassie, I managed to get it working and looking like it should. It helped a lot to draw things out, and then to add temporary borders around each element so you can visually see what is going on, thanks a mil! However now the next portion I'm having a struggle with. I wasnt sure to carry on here or make a new thread, as its still the same project, I decided to carry on here, hopefully thats ok? With all that now working, the ScrollToPlugin is not working as expected: https://stackblitz.com/edit/react-7nuqbc?file=src%2FApp.js I suspect it has something to do with my function that handles the click, and its possibly added in the wrong place, and possibly not correct also. Currently I get 2 issues: scrollTo target doesn't exist. Using 0 - Since it cant find the label, it always scrolls to the start There's a slight delay before it starts to scroll, I'm not sure why, perhaps because it couldnt find the label so it substitute it with 0? // My function to handle GSAP scrollTo //////////////////////////////////////// const handleClickJump = (label) => { gsap.to(window, { duration: 1, scrollTo: { y: '#container', offsetY: 0 }, onComplete: () => { gsap.to(window, { duration: 1, scrollTo: { y: gsap.utils.selector(containerRef)(label) }, }); }, }); }; /////////////////////////////////////////////////////////////////////////////// If I move the function into the useGSAP hook, then I get an error and the page doesnt load at all... EDIT: I also tried instead of onclick on my divs, simply giving it an id and in a test I gave the 1st one an id of 'jump', then instead of the above function, I have this in my useGSAP, but I still get 'scrollTo target doesn't exist. Using 0' jump.addEventListener('click', () => { gsap.to(window, { scrollTo: { y: gsap.utils.selector('#container')('text-1') }, duration: 1, }); }); EDIT2: I temporarily fixed the scrollto issue in an amateur way, skipping my labels, and simply directly working out the value to where the labels are suppose to be: onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 * 0.2 }) } But of course, this is amateur hour and would be nice to do it correctly with scrolling to my labels instead... <div className="inner"> <p style={{ top: '0%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 0 })} > 0% of 500 is 0 --- | </p> <p style={{ top: '20%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 * 0.2 }) } > 20% of 500 is 100 --- | </p> <p style={{ top: '40%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 * 0.4 }) } > 40% of 500 is 200 --- | </p> <p style={{ top: '60%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 * 0.6 }) } > 60% of 500 is 300 --- | </p> <p style={{ top: '80%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 * 0.8 }) } > 80% of 500 is 400 --- | </p> <p style={{ top: '100%' }} onClick={() => gsap.to(window, { duration: 2, scrollTo: 28000 })} > 100% of 500 is 500 --- | </p> </div> If sombody could help me out and tell me what I did wrong with my scrollto code so my original scrollto works by scroll to my labels, instead of using this last amateur hack, I would greatly appreciate it...
-
Thanks @Cassie that helped me out to make a start. I'm having a couple of issues, likely due to rooky mistakes, kindly bear with me: Here's my stackblitz to follow along: https://stackblitz.com/edit/react-ptxtbc?file=src%2FApp.js So I have a scrolltrigger, scrubbing through a 500 frame video sequence, 501 if you count the start frame of 0 I have 6 blue titles, set to come in with GSAP to specific corresponding video frames. Up to this point all works as it should Now I add my timeline thingy on the right with className "containerPosTimeline", and this is where I'm struggling to make it work like I want. The white timeline titles dont come in at the right time to correspond to the blue titles and the vieeo frames. Furthermore, that start timeline title should line up with the red line, and each timeline title should line up with that red line at the exact point their blue counterpart comes up. So too the end timeline title should line up with the red line. The timeline has a green outline, so easier to see in the view here I have a red line in the middle, which is meant to indicate the current position of the timeline 1st issue, I'm not sure how to set the height of this thing. For now I basically took the video frames of 500 and divided it by 3, so I get 166, but in my css I made the inner height 176, otherwise I dont see the end title in the timeline each title in the timeline, I similarly took the frame it should be and divided it by 3, and set its height to be that number from the top, to correspond with the video frames I do realise this is seriously flawed, and it would be great if I could simply punch in the exact same numbers for the white timeline titles as for the blue main titles, and then simply stretch the timeline with another number taller or narrower, depending how big I want the thing to fit into the green. Essentailly so I can make green timeline 3 or 4 or 10 times smaller, depending how much of it I want to see in the green block at a time. Hopefully I explained fully and clearly the current issues and where I'm trying to get to...
-
Yes that sort of thing. However I have 50 'sections' so spacing will get a bit tight If we use this example as is, how would one modify it, so you keep seeing only 5 sections in that section menu/timeline at a time, but the entire thing shifts up as you progress, meaning, when you start, you see it as is, ie section 1 section 2 section 3 section 4 section 5 but then as you go to each section, or scroll down the page, the entire section menu/timeline thing shifts, so for example lets say you scrolled halfway down, then the section timeline/menu thingy will read: section 25 section 26 section 27 section 28 section 29 then when you scroll all the way to the bottom, it would be section 46 section 47 section 48 section 49 section 50 understand what I mean?