Search the Community
Showing results for 'locomotive' in content posted in GSAP.
Found 589 results
-
Thank you @akapowl for your reply. I tried this, looks like it's not the problem. I'll show it with a gsap codepen that i modify a little bit. https://codepen.io/benmcarnolds/pen/oNLBLJy So when I first go the page, every thing works fine. When I leave the page the unload() function is called, locomotive.destroy() and triggers killing. And when i come back, every thing seems to work until ScrollTrigger.refresh(); Can't figure it out, what i shall do
-
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.
-
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
-
Hi, how do I use ScrollTrigger with a custom locomotive scroll developed with vanilla js? thanks
-
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.
-
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)
-
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?
-
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. -
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.
-
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 -
Hey kohlej. If you remove the scroller then console.log the ScrollTrigger you can see that the end value is the height of the viewport. If you add the scroller and then console.log the ScrollTrigger you can see that the end value is being changed to -0.01. Thus the ScrollTrigger's onUpdate function isn't ran. Maybe @GreenSock can provide some insight as to why that value is used instead of something based on the new scroller? Anyway, you can get it to have the same effect if you add the following: // Set the end to a viewport's height - as a function so it updates on refresh end: () => innerHeight, This causes the onUpdate to run. Though I don't really understand your logic inside of the onUpdate callback - I can't seem to get it working with or without Locomotive Scroll.
-
Hi Zach, thanks, it took some time but I managed to recreate my issue in code sandbox https://codesandbox.io/s/rough-moon-171sw?file=/layouts/default.vue The problem arises when you switch pages (route) with a nuxt link, it keeps it's initial data and I do not know how to remove all the scrolltrigger and locomotive scroll data beforeDestroy. I've tried killing all scrolltrigger instances in the Nuxt beforeDestroy method withScrollTrigger.getAll().forEach((trigger) => trigger.kill()); And stopping locoscroll with locoScroll.stop() but it's like it's all initiated multiple times or something.
-
@GreenSock ? thank you for clearing that up for me, I understand now that what I was asking is too much. ☺️ I already eliminated Locomotive scroll from the equation, and I thought this thread was perfect to ask the question about snapping sections since it only uses ScrollTrigger and ScrollTo plugin (and SmoothScroll) used in example from @Ihatetomatoes. I tried to combine it myself with https://codepen.io/GreenSock/pen/abdNxEJ and for some reason it doesn't work. It works only when I disable SmoothScrolling. Will keep trying... looking forward to learn more cause I just ADORE GreenSock. It keeps me up all night... No time to sleep. Thank you Jack ♥️
-
Hey Rob. This seems like a Locomotive Scroll question and isn't really related to GSAP from what I can tell (please correct me if I'm missing something). I suggest that you post in their GitHub issues and ask there.
-
If you're going to use Locomotive Scroll then you need to change the scroller for the ScrollTriggers: scroller: ".smooth-scroll"
-
Hi ZachSaucier, Thank you for the fix... I also have an issue with other tweens not activing when in view. Is this something to do with the Locomotive Scroll plugin? Please see code. Thanks https://codepen.io/robmarshall01/pen/abdaQBz
-
Most anything is possible. However, things like this are not easily compatible. Notice that the snapping sections pen makes use of GSAP's ScrollToPlugin to intercept the normal scroll behavior. You'd have to replace this with a Locomotive Scroll's .scrollTo() method to animate the scroll position but it doesn't seem to like to be called during a scroll with a touchpad or magic mouse. Either way, it's not really a GSAP question so we might not be able to help you much more with getting it to work
-
You can set smoothMobile: true in the Locomotive Scroll settings to get it to work on mobile.
-
You can set smoothMobile: true in the Locomotive Scroll settings to get it to work on mobile.
.thumb.jpg.368c48a2a16d8297dd6b848180c23d8a.jpg)
