fakesamgregory
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by fakesamgregory
-
-
@Rodrigo thank you. I’ll take a look and see if this is indeed my issue.
as an aside, would it be possible to encourage the moderators to encourage users to consider sharing their solution or links in cases like this? I feel this would benefit the community massively so instead of just congratulating them, something like “please consider sharing your solution with the community”. You obviously can’t force it but you can at least teach good etiquette. After all, these forums aren’t just for those trying to get their specific issue sorted.
-
3
-
-
What's the other thread? Can someone link to it?
On 4/20/2022 at 9:37 PM, Ndonna said:Thank you much @OSUblake the link was just a sample to explain my bug. Found out it's not an issue from my end but a React 18 issue which you had addressed on some other thread. Just saw the workarounds and decided to roll back to 17. Thank you so much once again
-
Thank you @Rodrigo. Yes I looked at these solutions and while they get close, they don't quite work in combination.
Similarly to the first example, I want a section at the top that scrolls "normally" and as the user scrolls down to a certain section, instead of the horizontal scroll scrubbing with the scroll, the page gets 'caught' like in the second example. The issue with Observer is that the user cannot be scrolling/the window needs to be still for the Observer to take hold. As can be seen from my example, if I 'flick' the page, I'm able to scroll past the Observe section. It's only if I allow the scrolling to come to a standstill in the Observe region that it can take over. I think this is more a Mac/Trackpad thing.
I've thought about using pinning to create the illusion that the Observer section is stuck but then I'm not sure what to do with the extra space that the pin creates after the user finishes the Observer section and returns to normal scroll. and there will always be a possibility that the user can freescroll so hard that they even move passed the pin 'illusion'.
I've played around with onEnter on my ScrollTrigger (can also be seen from my example) but even though I enable Observer at this point, it doesn't actually take effect until the inertia scroll has come to a standstill.
-
Are there any examples of something like fullpage.js that appears midway through a 'normal' scrolling website.
I've been playing around with many different solutions from pinning, to horizontal scroll all using ScrollTrigger/Observe but I just can't quite get a slider that is 'locked' in 'fullpage mode' unless the user scrolls past the last slide or backwards past the first slide that has an level of resistance between each slide..
Here is the progress I've made. An attempt to show what I'm trying to achieve but it's not working for me. Maybe my CSS is wrong, maybe my approach is wrong. Any thoughts/guidance/examples would be great!
See the Pen qBymbWe by FakeSamGregory (@FakeSamGregory) on CodePen
-
All resolved!
-
1
-
-
I don't think I can explain any better than the docs already do. What's not clear there?
QuoteString | Number | Function - Determines the ending position of the ScrollTrigger. It can be any of the following:
-
String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example,
"bottom center"means "when the bottom of the endTrigger hits the center of the scroller"."center 100px"means "when the center of the endTrigger hits 100px down from the top of the scroller" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" ifhorizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is"."max"is a special keyword indicating the maximum scroll position. -
Number - An exact scroll value, so
200would trigger when the viewport/scroller scrolls by exactly 200 pixels. - Function - A function that gets called whenever the ScrollTrigger refreshes and calculates its positions (typically upon creation and any time the scroller resizes). It should return a String or Number, as described above. This makes it easy to dynamically calculate values. Like all callbacks, the function receives the ScrollTrigger instance itself as the only parameter.
This is a static position that is calculated when the ScrollTrigger is created and when the scroller is resized, based on where things are in the normal document flow. It is not constantly recalculated, so for example if you animate the trigger/endTrigger, it won't constantly update the start/end values accordingly because ScrollTrigger is highly optimized for performance. You can call
ScrollTrigger.refresh()to force things to be recalculated. The default is"bottom top".-
4
-
1
-
String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example,
-
Not sure if I fully understand. A more complete code sample would be awesome but can't you use...
const myValue = '120' THREE.Math.degToRad(Number(myValue))
-
Thank you @Carl I thought about something like this. Didn't know the syntax but this absolutely works.
I'd be interested to hear if this is an endorsed method or if indeed tweens/timelines have a property built in for this type of thing.
-
I have a ScrollTrigger that pins the animation.
The issue is that as soon as the animation completes, scrolling continues.
I would like to add an extra bit of space to the animation where nothing really happens, the user is just delayed slightly before scrolling continues after the end of the animation.
-
After some digging, I found `containerAnimation` property with a lovely example.
See the Pen abjNdQP by FakeSamGregory (@FakeSamGregory) on CodePen
-
I have a pinned ScrollTrigger timeline animation happening with `scrub` set on it. I would love to be able to 'inject' an animation into that timeline at a given point that does not respond to the scrub. I'd imagine code something like this (see comment).
See the Pen ExpKPYo by FakeSamGregory (@FakeSamGregory) on CodePen
-
@OSUblake I managed to create a sandbox environment and it worked just fine.
My specific use case was the loading of images to which I solved by looping through the images and calling
ScrollTrigger.refresh().Maybe this'll help others.
useEffect(() => { if (!smoother) { setSmoother(ScrollSmoother.create({ effects: true, smoothTouch: 0.1, })) } // refresh once all images load Array.from(document.querySelectorAll('img')).forEach(img => { img.addEventListener('load', function() { ScrollTrigger.refresh(); }) }) return () => { smoother?.kill(); }; }, [location]);
-
1
-
-
@OSUblake Thanks for responding! I can't right now but I can tomorrow. Just wondering if this was an issue that's been encountered before I create a project.
-
I have a React project where I'm using ScrollSmoother and where the route changes in height, the ScrollSmoother does not recalculate. I can force it by resizing the window.
I have tried
smoother.scrollTrigger.refresh(),ScrollTrigger.update()to no avail...I'm happy to share my project but there's a few moving parts but wanted to first know if I'm misunderstanding something simple or somebody knows how I might go about this.
I guess where the magic happens might be a simple way to start. I'm doing it in the useEffect hook and am able to trigger on route change
useEffect(() => { smoother = ScrollSmoother.create({ effects: true, smoothTouch: 0.1, }); ScrollTrigger.refresh() }, [location])
basic concurrency between two tweens (with react)
in GSAP
Posted
While it doesn’t directly solve your issue, consider using CSS in this instance. I can’t see the result in your Codepen to know if this entirely relevant.