Search the Community
Showing results for 'locomotive' in content posted in GSAP.
Found 116 results
-
Hello fellas! I have an issue with a "Timeline" style layout and it´s driving me crazy! Here´s the deal: The page has to have vetrtical scroll but, when the timeline section appear it should be a "sticked" section with horizontal scroll, until there there is no problem at all, the problem begins when I want to show the items with the Locomotive animation for the horizontal section childs, as you can see in the "Pen" only the first ones get the locomotive animation but the other ones not. The effect that I want to achieve for the horizontal scroll is something like this I hope you legends can help me to solve this problem.
-
Hey everyone! I'm having some issues with getting my horizontal scrolling to time up right and have been scratching my head on this for a while now. As you can see Im using Locomotive scroll to create the horizontal scroll on mousewheel down and have scroll trigger timed up to my sections that wrap where my images would go (called .imger) and a background colour. What I would like to achieve is that the center of the background colour matches the center of the .imger when they are in the middle of the viewport. This works on certain screen sizes but since the imger is defined by the Vh the effect goes completely out of line at small or large screen sizes. I don't want to sync the animation of my .bg layer to Vh as the images will be different dimensions (some landscape and some portrait etc.) is there any other way of doing this? Thankyou so much in advanced! Click 'edit on codepen' to see the pen - I have no idea why it breaks when embeded? perhaps someone can also help with this? -
Hello, I have an issue with the website I am creating on Elementor. The template used here has locomotive scroll, GSAP and GSAP Scroll Trigger activated. Several elements are present on this template, which are animated and working as expected. Nevertheless, I can’t find a way to add a show-hide header. I tried many different combinations. When I am editing mode I see the header, but when I go on Preview mode the header doesn’t show up. New to this type of development, I would appreciate your help. I used the CSS ID on my header, #maria-header, I completed the code CSS and the javascript below: I appreciate the time you take to read and answer me. Best, #maria-header { display: flex; position: fixed; z-index: 999; width: 100%; } <script> ;( function() { // wait until gsap & ScrollTrigger available let chck_if_gsap_loaded = setInterval( function() { if( window.gsap && window.ScrollTrigger ) { // register scrolTrigger gsap.registerPlugin( ScrollTrigger ); // ... do your thing show_hide_header(); // clear interval clearInterval( chck_if_gsap_loaded ); } }, 500 ); function show_hide_header () { const site_header = document.querySelector( "maria-header" ); const show_hide_header = gsap.from( site_header, { yPercent: -100, duration: 0,25, ease: "sine.out", } ).progress( 1 ); ScrollTrigger.create({ start: "top top-=" + 100, onUpdate: ( self ) => { if( self.direction === -1 ) show_hide_header.play(); else show_hide_header.reverse(); } }); } } )(); </script>
-
Hello, how can I have a sticky element? In this Code Pen I have a sticky header that works well, but the sticky element stays in place. For a better view, see the address below https://codepen.io/mr_mousavi/pen/LYWvWrR Thanks for these good libraries.
-
I think I've properly setup ScrollTrigger with locomotive scroll using some examples seen in the forum, however I can't seem to get my animation to work properly. It triggers as soon as the page loads without me scrolling to the point I set my trigger. here is a codesandbox link. https://codesandbox.io/s/cocky-darkness-ncfh6?file=/src/components/SectionThree/SectionThree.tsx sorry I couldn't use codepen. don't know if that's fine? edit: relevant files: App.tsx, SectionThree.tsx, instantiateScroll.ts
-
Hi all, I've forked the ScrollTrigger + Locomotive demo linked from your website. The only changes I've made were to add two extra sections to make it longer, and then add the data-scroll-container and data-scroll-section attributes, as is recommended by Locomotive: To break ScrollTrigger, you can simply scroll through the demo as usual, and then once at the bottom, just resize your browser. (Please ensure that all other sections are outside the viewport.) When you scroll back up to any of the other sections, their ScrollTriggers will be broken and will not play, as if you're not re-entering their section at all. This behavior is reproducible in all scenarios when employing smooth scroll and data-scroll-section. Calling ScrollTrigger.refresh() from the console will only refresh any ScrollTriggers that are currently within view, rather than refreshing globally as it states it should. I have a hunch that it's related to how Locomotive puts a data-scroll-section-inviewattribute on the relevant section (and makes all others opacity 0 and resets their transform), but that's about as much as I've been able to deduce so far. This has been racking my brain for a couple of days and I would greatly appreciate assistance. Thank you and sincerely, C5 -
Hi guys, I'm trying to implement Locomotive smooth scroll and GSAP library to my website. The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section. I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help! Here is the CSS and Javascript that I use in my project: https://codepen.io/stacies/pen/PopBXrm
-
I'm wondering if it's possible to make locomotive.js infinite loop to the start of the content when you reach the bottom of the page content? Has anyone tried this or something similar with locomotive.js before? -
Hi, I have an idea I just can't seem to execute. I want to pin the middle section ".flip-bounds" whilst the animation of the cards are flipping. But it seems like it gets stuck. You can not finish the flip animation (order: yellow card, blue card then red card), and you can not get to the 3rd div ".after". I've tried pinSpacing: false, & pinType:"fixed", but fixed caused the entire div to disappear. Any help would be great! Thank you
-
Hi, I'm using lottie with scrolltriggers and locomotive. It works fine when I resize the browser window but not on first load. Tried adding refresh into function but no joy. Thanks
-
After the initial animations (fade up with autoAlpha and y), if you begin to scroll, Locomotive Scroll's parallax takes over but the position of the trees jump down. I'm assuming this is because when Locomotive initializes, it remembers the position of those elements, and then GSAP adjusts them afterward. Then when Locomotive takes back over, they snap back to the position Locomotive remembers. Is there a simple way to fix this? Thanks in advance. Edit: Looks like the embed window for Codepen isn't showing it. You need to click in to the example. -
Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
-
Please can any one help me with Scrolltrigger + locomotive code, I want to draw the svg circles one by one when scroll in to view (circles are in the who we help section and one circle is rotating) it was working perfect without locomotive but when I added locomotive and also added the code instructed by gsap it stopped working there is something wrong. I would be very grateful if anyone can help.
-
Having trouble getting this to work with Locomotive Scroll. Works fine when locomotive scroll is disabled. gsap.registerPlugin(ScrollTrigger); let allVideoDivs = gsap.utils.toArray('.vid'); allVideoDivs.forEach((videoDiv, i) => { let videoElem = videoDiv.querySelector('video') ScrollTrigger.create({ trigger: videoElem, start: 'top 70%', end: 'bottom 30%', markers: true, onEnter: () => videoElem.pause(), onEnterBack: () => videoElem.pause(), onLeave: () => videoElem.pause(), onLeaveBack: () => videoElem.pause(), }); });
-
Hi everyone, I'm new to the community, but been a huge fan of GSAP which i've just started to get into. I'm currently working on a school project, and trying to implement Locomotive scroll with Scrolltrigger. The issue that im facing is when I enable locomotive scroll, everything seems to be working fine, but when i select and go to a specific page from the menu, user gets stuck in that page, I've also realized that gsap animation that is triggered is also acting a bit strange on scroll, and i cant seem to get it working properly. The site functions normal without the locomotive scroll. I've added a rough draft of my project to give some idea of what i'm doing. I'm fairly new to javascript, and i'm not really sure if my implementation is correct, and i would really appreciate if someone could point me into right direction to setup Scrolltrigger and Locomotive scroll to work properly. Thank you & happy tweening ?
-
Hi all people!! I have a small problem with library locomotive scroll and implementation of follow mouse (wthi this example https://codepen.io/Sahil89/pen/RQjyQa) 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!
-
Hi, I was wondering how do I implement GSAP ScrollTrigger into a Locomotive Scroll that has the direction set to horizontal? Is this even possible or do I need to implement horizontal scrolling with GSAP? like in this demo (https://codepen.io/cameronknight/pen/qBNvrRQ) The CodePen preview isn’t working correctly. Here is the direct link to the pen: https://codepen.io/Pullapooh/pen/VwmMRJR
-
Hello Guys, i'm currently working on a personal site and i was planning on using Locomotive Scroll with GSAP. I was intending to use a sticky/fixed Header and it's for some reason not working. Also i wanted to use mix-blend-mode because i'm switching between black and white backgrounds. So basically i wanted to recreate this codepen: https://codepen.io/martendebruijn/pen/yLarQOa but with Locomotive Scroll and GSAP. My attempt: https://codepen.io/youcci/pen/gOLXgaB Can someone please help me? Thank you
-
Hi I'm trying to do horizontal scrolling whilst use locomotive scroll to slow down the scrolling also I notice there is an issue when using a fixed header the logo moves up slightly once they have reached the bottom the scroll. How do you use locomotive with gasp going horizontally every time I think I'm getting close I end up scrolling diagonally down and to the right rather then just scrolling sideways. I have seen a-lot on here going vertically but can't find any horizontal example. I also wanted to slow it down presumably I can with locomotive? Any ideas would be greatly appreciated.
-
Hi! I have used Locomotive + Scrolltrigger and work correcly but i have a problem with mobile. In this page, with mobile (simulator and also with device), i have a shake scroll and isn't fixed.. This is so annoying for me, how can i fix this? In the attachment the video Here the HTML structure <section id="sectionPin" > <div class="pin-wrap"> <div class="pin-box"> </div> <div class="pin-box"> </div> <div class="pin-box"> </div> </div> </section> This is the JS code scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".scroll-container", { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, }); var pinBoxes = $('.pin-box'); var pinBoxWidth = pinBoxes.width(); var windowWidth = $(window).innerWidth(); //Prende la larghezza di tutto lo schermo 100vh var pinWrap = $('.pin-wrap'); //Prende il wrap totale che contiene tutto var pinWrapWidth = windowWidth * pinBoxes.length; //Larghezza finestra * .length vede quanti contenitori ci sono con pinbox var horizontalScrollLength = (pinBoxes.length - 1) * windowWidth; pinWrap.width(pinWrapWidth); // Da al contenitore totale una alrghezza fissa gsap.to(".pin-wrap", { scrollTrigger: { scroller: ".scroll-container", scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth, }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); Registrazione schermo 2021-02-02 alle 22.05.52 (1).mov -
Hello, is there any quick way with gsap to make the animation of https://locomotivemtl.github.io/locomotive-scroll/ at section 3. with the Lerp elements?
-
Hello guys. Please help me with some strange behavior. I have parent component (React) where i initialize ScrollTrigger.scrollerProxy with Locomotive Scroll as you recommended in docs (scrollerProxy). If i try to use scrollTrigger inside that parent component (using useEffect) - everything works fine. But if i use scrollTrigger inside child component and provide the same scroller element (with id #smooth-scroll) then i have an issue. I've already tried: to call ScrollTrigger.refresh() inside child component; make reference (useRef) to locomotive instance in parent component and pass it to child via props; make reference to scroller element using useRef inside parent and pass it to child via props; to initialize ScrollTrigger.scrollerProxy with Locomotive Scroll inside child component - this works, but if i have bunch of elements which calling this initialization - i have terrible performance issue. So i think the best way is to provide only one initialization inside parent (i.e. page) and pass it somehow to child components. Link to Codesandbox (to see smooth scrolling click "Open in new window" icon at top right in browser panel). Maybe someone else have the same problem? What i do wrong in this case?
-
Hello,i was looking to make a progress bar for my page, but the progress of the scroll is wrong. Also i need to add an option to change color, when in view on some sections. Regards, D
-
Hello, i would this post. That you can with scrolltigger make animations like full page, but i am using locomotive + scrolltrigger, i need a part of my sections to behaviour like fullpage. I need on my codepen the hero__inner sections behave like fullpage, or something similar, Thanks in advance
-
Hello there, I need a help, i am trying to understand how i can do different animations with scrolltrigger & locomotive when a section enters a view port , and a different on exit. For example here, i need the hero section starts autoAlpha: 0 when is leaving the view port, but i am not really sure the timestamp on the timeline, whats the position parameter to use.
