Search the Community
Showing results for tags 'scroller'.
Found 13 results
-
Hi everyone, I'm writing here for the first time as I see that your community is quite developed, it's cool, thank you. I don't have more experience with GSAP, but I'm trying to realize this effect I have a page where the first block always takes 100vh, and as soon as I initiate a scroll event (any, strong or weak) my block automatically scrolls (I can't interrupt this event) and when it reaches the start of the second block, the effect turns and I can safely scroll the page. I'm trying to implement this, but I keep running into various bugs, I used to write it via Framer Motion, but now I'm trying to rewrite it on GSAP as I think this solution is more suitable for this effect. Does anyone have similar cases or maybe a demo to share some advice? Thank you very much I mean, in a nutshell. The point is that you can't scroll partially through the first block, only always the whole block. And then the page starts to work like normal scrolling in the browser on the next blocks https://codesandbox.io/p/devbox/scroll-sections-txdh67?file=%2Fsrc%2FApp.tsx cut5.mov
-
Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!
-
Hi i want to make exact animation for testimonial section from this website (https://appinventiv.com/) at the end you will find testimonial section Please provide complete step by step tutorial i was noob to GSAP please help me
-
Hello, Smoothscroller and Smooth Scrollbar version but I couldn't get the Smoothscroller feature to work. I think there is a point where they overlap. Can you help?
-
normalizescroll ScrollTrigger: Normalize scroll on custom scroller
Grommas Dietz posted a topic in GSAP
Hey there Thanks for all your tools, the updates and new features. Really appreciate and love to work with it! Is it possible to normalize scroll on custom scrollers in future releases of ScrollTrigger? Currently the normalisation only works for the overall page, similar to ScrollSmoother, right? The CodePen provided is just a quick test in reference. Comment out ScrollTrigger.normalizeScroll(true); to see how it breaks the scrolling. -
Hi, I would like to create a carousel. Carousel has 2 parts, if i scroll 2nd part then it should fade in/out 1st part and show its content.
-
Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your help gsap.from('#text-1', { opacity: 1, x: -300, scrollTrigger: { trigger: '.red', start: '80% 50%', end: '+=500', scrub: 1, }, }); gsap.from('#text-2', { opacity: 1, y: 300, rotate: -90, scrollTrigger: { trigger: '.red', start: '60% 50%', end: '+=500', scrub: 1, }, });
-
I recall seeing a nice marquee example, but I can't track it down. Undoubtedly this is a common use-case for a horizontal marquee / scroller (logos, testimonials, etc.). I'd like the beginning of the next animation to trail the end of the one that's about to end. As it is, I have a space between the two. Please point me to the example, or check out my code and codepen below: gsap.timeline({ repeat: -1, defaults: { ease: "none", }, }) .fromTo( ".card", { x: (i, el) => innerWidth * i }, { x: (i, el, t) => -innerWidth * (t.length - i ), duration: d, } ); Thanks
-
Hi all. Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning. At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen] I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector. The function is supposed to be triggered when a link is clicked with an href of `#someID` but not for an href of `#`. GSAP doesn't seem to like the `:not` selector... or my attempts to adapt the syntax are wrong. Here's the jQuery version: $(function() { $('a[href*="#"]:not([href="#"])').click(function() { // do stuff }); }); Could anyone give me a few hints?
-
Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman -
I have a scrolling element (x axis) which I have applied draggable to. Everything is working fine when the page loads however when I append a new child element to it the scrolling element does not update its width which makes the element unscrollable. I have had a look at running update(), applyBounds() and even manually changing the padding right value but no bueno.
-
I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. Thanks for your help!
-
Hi Everyone, I’m writing due to a “Scroll function” I’m having difficulties in implementing for an APP. I’ve developed an APP for ios and android in Flash professional cs6 with AIR 3.2 and everything works perfectly apart from the scroll function. I’ve used the ThrowPropsPlugin and the movement works fine however it doesn’t allow me to select what I want to select in the container. Instead when I take off my finger it selects that element I’ve stopped on. In the ThrowPropsPlugin I’ve applied the mouse_down and mouse_up events to make the vertical movement, and inside the container I have MovieClips associated with events of touch_tap. So when I take my finger off automatically the movieclip is activated. Does anyone have a solution to this problem? I feel like I’ve tried everything. Removed the event, added events, changed events, the pressure, resistence of the container, changed the properties of MouseChildren and nothing. If anyone has any advice on this problem I would be most grateful.
