Adiacent
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Adiacent
-
-
Hello everyone, any idea of how to create this immission effect with scroll-trigger?
I don't care about the opening on the images but only the zoom effect of scroll section .
Thanks
https://2018.craftedbygc.com/#enter -
Thanks @akapowl,
my distraction, I often used the scroll locomotive but not smooth-scrollbar ....I haven't read the documentation well. -
Hi,
putting the smooth scrollbar, the fixed header as on your example no longer works, you can give me a hand. Removing the smooth scrool's js code works fine.
Example:
(See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen
)
ThanksSee the Pen PopjGbz by marcotorcolacci (@marcotorcolacci) on CodePen
-
Good evening friends,
give me a hand to integrate the cursor effect (See the Pen NWKpZJb by GreenSock (@GreenSock) on CodePen
)in the demo with the ASScroll scroll ()
Thanks so much.
Trying it remains visible to me only in the first view then disappears when scrolling, I think it is the problem of the coordinates of the new scroll of ASSscroll.See the Pen PoZRwPW by ashthornton (@ashthornton) on CodePen
-
Super!! Perfect! Thanks
-
UPDATE:
I think the problem is not the resolution itself in the nootebook but in the 125% layout option (recommended choice) of windows 10.
Putting it at 100% works, but it looks too small .... -
https://drive.google.com/file/d/1jwQGt7UNsXakt8rp_KZERaCLC3haKJfy/view
Hi super forum,
using this trick, I noticed that some resolutions say from 1500px down it happens that when you go back up, it immediately goes to the first panel(section) without going through the intermediate panels (sections).I attach video, in the first case with 1920px monitor everything ok, in the second case notekook 1500px the problem occurs.
Practically it does it to me on all the demos where this code is implemented.
Is it impossible that no one has noticed?See the Pen abdNRxX by GreenSock (@GreenSock) on CodePen
-
On 3/5/2021 at 2:31 PM, ZachSaucier said:
Closer to a minimal demo
Several notes:
-
You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply
overwrite: 'auto'
to your tween that animates the position of your circle. See this post for more info. - If you remove the Locomotive Scroll part you can see that your code doesn't work in that case either.
- I don't really understand why you're using the setTimeouts.
- You should avoid container.getBoundingClientRect() from firing every tick if you can as it's not very performant.
- As I said in my first post in this thread, since Locomotive Scroll replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page.
In cases like this you need to see how the element is mispositioned (is it always a constant amount off? If so where is that constant amount coming from? Is it off by how much you scroll? If so you need to add in the scroll position to the calculation).
If I were creating this I'd probably make the circle a child element of the section that you care about and position it absolutely. That makes the calculations easier, though it's definitely possible to do the way you have it.
I've not used Locomotive Scroll too much. The only way that I'm aware of getting the scroll position is using the scroll event listener. There might be a better way (like a property on the locomotive instance) that you could do instead.
How could I make sure that the circle always has a start and end position?
That is when I enter or when I go out the circle was in the center of the image.
Thanks! -
You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply
-
all clear! I will update the version of gsap3. (cmq the problem was always what you solved me, understand how to intercept the scroll of the locomotive.) Thank you very much.
You say that the setTimeout (() => is useless? In the demo the scroll locomotive is used.
-
Hi,
I made the demo as minimal as possible. removed useless css and js.
The circle is very far from the pointer and therefore cannot be seen in the whole image but only in the central part ....
See the Pen BaQPzed by marcotorcolacci (@marcotorcolacci) on CodePen
-
Thanks ZachSaucier!
This is my litte demo:
See the Pen BaQPzed by marcotorcolacci (@marcotorcolacci) on CodePen
The circle must appear in the image of the man and it should move synchronously with the mouse.
Thanks all for help! -
Hi all people!!
I have a small problem with library locomotive scroll and implementation of follow mouse (wthi this example )The mouse and circle are out of sync. If I put the smooth on false of locomotive scroll, they are ok, they move in a synchronized manner. How can I fix it ??
Basically can show me an example of this use of application with the locomotive-scroll
Thanks!
similar effect with gsap of scrool help / ideas.
in GSAP
Posted
Thanks,
I badly explained myself. I am not interested in the rendering part or the non-custom scroll but I was wondering if with scrolltrigger it was possible to do that type of animation form navigation, a zoom inside a zoom loop. see image of website https://2018.craftedbygc.com/#enter