Search the Community
Showing results for 'locomotive' in content posted in GSAP.
Found 589 results
-
Hey @nayan12345 - welcome to the forums. That page you linked to uses locomotive-scroll for the smooth-scrolling you see. That is nothing immediately related to GSAP. If you wanted, you could achieve a smooth-scrolling effect with GSAP and the helpf of ScrollTrigger, though, for example. Maybe these threads have some helpful information for you. Hope this helps. Cheers, Paul
- 2 replies
-
- 2
-
-
- smoothscroll
- gsap
- (and 1 more)
-
hey, you know how to turn off the scroll track in this example? i'm testing locomotive + gsap, it's ok, but i can't figure out how to remove this idiotic strip.
-
Im use barba first time, and i think my scripts failed w/o errors on console, and locomotive doesnt destroy because script failed before destroy, and I get some scrollTrigger errors, and think I need destroy locomotive scroll and scrollerProxy, thank you for help, i'm just confused, but now I found reasons why I get this errors
-
It looks like you might be using Locomotive Scroll? So is your question how to kill the Locomotive Scroll instance? It has a .destroy() method if so. If that's not what you're looking for I don't understand what you are looking for. A demo would help us understand and better be able to help.
-
Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks
-
Yes, that excatly the case, i want to achieve snapping on only the first two sections and after that smooth scrolling. And yes, i know that locomotive has scrollto method, but i can only make it work as click function. Dont know how to bind it on mouse scroll when section is in viewport, thats why i was trying to use gsap plugin, since i already use scrolltrigger with locomotive. I was working with this demo i found here on forums: https://codepen.io/Narendra_verma/pen/MWyQeOd But failed when i tried to make it use locomotives scrollTo instead of scrolltoplugin like it is using
-
GSAP doesn't have a plugin for ScrollToPlugin in smooth scrolling libraries, no. But libraries like Locomotive have their own "scrollTo" methods. For example see the scrollTo method of Locomotive.
-
Thanks a lot, i tried everything mentioned there, but it all uses gsap scrollToPlugin and i cant make it work with locomotive scroll. scrollTrigger is working fine since i used scrollTriggerProxy for communication between locomotive scroll and scrollTrigger. Is there some proxy for scrollToPlugin or some way that scrollToPlugin will work with locomotive scroll as perfectly as scrollTrigger plugin does ? Thanks
-
Hi, i’m trying to achieve this behaviour and im googling without any luck for the past few days. Seems easy in theory so im just wondering if it is possible with gsap / scrolltrigger. -while .div1 is in viewport first mouse scrolldown will scroll to the next anchor point (.div2) basically my first two sections on website im working on are full height and width, i have button there that scrolls to the next section and im trying to bind this scroll tu function to mouse wheel as well so you cant stop scrollimg between tho sections and first scroll takes you straight to the nech anchor point. After that scroll behaves nornally again. im using gsap3 scrolltrigger integrated via proxy with locomotive scroll. does anyone know if this is possible? thnaks a lot for any help:)
-
Hi Zach, I tried to implement this into my own code but it hasn't been working as expected— whenever I resize the window, it just jumps to some random progress value and my other timelines would stop working. I'm also using locomotive scroll, would they be affecting each other? This is my Codepen: https://codepen.io/cocotx/pen/ZEWdMJV I'm not sure what I'm missing here... would really appreciate some help! Thank you.
-
Hi, I created a CodePen demo. My job is to make the black block change the pictures. <div class>= 'panel blue' 'panel red' 'panel orange' are my project pictures. Here is an example of what I am trying to achieve with gsap + locomotive scroll: https://cuberto.com/. On the screenshot I wrote what I mean. I'm not interested in the project shift effect, I want the usual effect, for example: https://codepen.io/GreenSock/pen/BaowPwo I hope my question is clear and you can help me to implement this block with projects. What do I need to write, what code have I missed?
-
I'm trying to recreate the sticking effect exactly like yours https://cuberto.com/ but taking into account the smooth scrolling of locomotive scroll + scrollTrigger. But my attempts are unsuccessful. The demo you threw off doesn't quite fit with locomotivejs in mind. Can I ask you to create a simple demo version that uses at least 2 cards? It is important that a smooth scrolling script with scroll Trigger js is installed there
-
Hello, I use a smooth-scrollbar within a project. I can run it with ScrollTrigger with scrollerProxy(). No problem. But it only works with scrub:true. I just can't use it to trigger it. I also used it with locomotive-scroll. The scrub problem is not there. (In codepen if you change scrub:true it will work) https://codepen.io/ozcancelik/pen/WNwJqRj Is this a scrollProxy bug? Or where am I doing wrong? Thank you. Ozcan
-
Hey onofrio and welcome to the GreenSock forums. Have you already checked out the .scrollerProxy() method of ScrollTrigger? It shows how to get Locomotive Scroll (and other smooth scrolling libraries) hooked up to ScrollTrigger.
-
Hi, how do I use ScrollTrigger with a custom locomotive scroll developed with vanilla js? thanks
-
Barba + ScrollTrigger Janky Timeline After Transition
ZachSaucier replied to mulegoat's topic in GSAP
Hey mulegoat. It's hard to debug larger projects like this. I think these statements should be switched in order for one: // Bad initSmoothScroll(data.next.container); scroll.destroy(); // Good scroll.destroy(); initSmoothScroll(data.next.container); I'm also not sure if you need this: // reinit locomotive scroll scroll.init(); Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...- 3 replies
-
- 2
-
-
- barba.js
- locomotive-scroll
- (and 2 more)
-
Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP
-
I'm a bit confused because ScrollTrigger does this by default for all ScrollTrigger animations whereas that's not the case with Locomotive Scroll. The issue with your demo is that your values start and end values are telling the animations to continue for the entire duration of the container's width no matter where they are in the container. If you want to avoid that then you'll have to change your logic a bit: Record the initial offset of each element. Reposition the element until it's just off screen (if not on screen already). Create an animation that animates the child element to the left 100vw + the width of the child element with linear ease (except the last one(s) so you don't have blank space at the end, you animate them less). Create a ScrollTrigger for each child element which starts at the offset recorded in 1 and goes for 100vw + the width of the child element (except the last one(s) so you don't have blank space at the end, their end should be shorter). Does that make sense?
-
Hi there ! I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/ Thanks for your feedback
-
smooth scrolling with locomotiveScroll and scrollTriggerProxy on VUE
ZachSaucier replied to vlbn's topic in GSAP
That's because you created two instances of Locomotive Scroll. You need to use the same instance (and not create multiple). -
smooth scrolling with locomotiveScroll and scrollTriggerProxy on VUE
ZachSaucier replied to vlbn's topic in GSAP
Hey vlbn. This is because the ScrollToPlugin has no idea that you're using a smooth scrolling library (which actually doesn't use the normal scroll position of the page). As such, it's probably best to not use the ScrollToPlugin when pairing things with a smooth scrolling library. Locomotive Scroll has a scrollTo method that you can use instead. It has its own animation functionality which is probably fine for this sort of thing. Or you could use it with a duration of 0 and animate a scroll value using GSAP if you wanted to. -
Help! I need scroll to 'some_element' when i leave some-section. For this I used event onLeaveBack. ( onLeaveBack: () => locoScroll.scrollTo('.some_element') , ) and I get this error ( ScrollTrigger.js:453 Uncaught TypeError: Cannot read property 'update' of undefined at _updateAll (ScrollTrigger.js:453) at eval (locomotive-scroll.esm.js:401) at Array.forEach (<anonymous>) at _default.checkEvent (locomotive-scroll.esm.js:398) at _default.dispatchScroll (locomotive-scroll.esm.js:356) at _default.checkScroll (locomotive-scroll.esm.js:241) at _default.checkScroll (locomotive-scroll.esm.js:2043) at eval (locomotive-scroll.esm.js:1995) ) If I used event onEnter - all ok, but I need do scroll when I scrolling up -
Hmm I tried both setting the scrollTop to 0 and using locomotive scroll to scroll to 0 and neither work unfortunately, can't figure out how to use the .scroll() function with a scrollerproxy though.
-
Hi, I tried to incorporate Locomotive Scroll by doing a copy-paste job from the demo in the docs. It went pretty well. However, on Chrome and FireFox (mac) you'll see that the scroller-start and scroller-end markers jump vertically. If I set pin:true you will see that car does a similar vertical jitter. I suspect I set something up wrong with the css, but have been staring at it for quite awhile. Would appreciate any help
-
Here is working example without Locomotive Scroll : https://codepen.io/artyor/pen/mdPyyjK Here it works as intended, where .skew-box is animated on scroll Maybe the point of using onUpdate is more clear in this example? end: () => innerHeight, doesn't seem to do anything for me
.thumb.jpg.368c48a2a16d8297dd6b848180c23d8a.jpg)
