Search the Community
Showing results for tags 'gsap'.
-
Hi there, does anyone know how I can bind that slider I createt using dragdealer to a lottie animation? I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation. I would really appreciate any help, thanks. -
Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg
-
Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html
-
Hi everyone, Im trying to use ScrollTrigger with Next.js. I just coppied https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js but my example not work like that. boxC moving a little bit between start and end position, after it jumps 150-200px and it moves again with scrolling. Thanks Screen Recording 2022-11-10 at 21.45.18.mov
-
Hello, I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference. https://andersonsupply.com/ I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP? waiting for your valuable reply, Regards, Dhaval
-
I want to do scroll down animation using GSAP ScrollTrigger in my Angular project like this . https://codepen.io/sanjuu01/pen/vYLmPPV?editors=1010 I tried this but this is not working. I don't know where i did a mistake. How to solve this import {Component, HostListener, OnInit } from '@angular/core'; import 'gsap'; import {TimelineMax} from 'gsap/gsap-core'; import Draggable from 'gsap/Draggable'; import ScrollTrigger from 'gsap/ScrollTrigger'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { scrollBox = new TimelineMax({paused: true, reversed: true, scrollTrigger: { trigger: '.box', pin: true, start: 'top top', end: 'bottom bottom', markers: true, toggleActions: 'play none none reverse', } }); constructor() { } ngOnInit() { this.scrollTgr(); gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin); } scrollTgr() { this.scrollBox.from('.box', { y: 30, opacity: 0 }); this.scrollBox.to('.box', { y: 0, opacity: 1 }); this.scrollBox.play(); } } https://stackblitz.com/edit/angular-scroll-trigger?file=src%2Fapp%2Fapp.component.ts
-
Hey, Hopefully a simple one for someone who's been using gsap more than a day I'm just trying to cut down on the number of gsap.to animations I'm calling, but I'm unable to get any animation happening when passing evt.currentTarget as it's always null - I also tried evt.target & event.target.id to no avail document.getElementById("menuitem0").addEventListener("mouseenter", hoverIn); function hoverIn(evt) { console.log(evt); gsap.to(evt.currentTarget, { scale: 1.5, color: "white", duration: 0.3, paused: true, ease: "power2.inOut" }); } I saw you can do something like this let hover1 = gsap.to(menuitem1, { scale: 1.5, color: "white", duration: 0.3, paused: true, ease: "power2.inOut" }); document.getElementById("menuitem1").addEventListener("mouseenter", () => hover1.play()); document.getElementById("menuitem1").addEventListener("mouseleave", () => hover1.reverse()); but need to removeEventListener, so needed to break the function out Any help is much appreciated
-
Hello, I want to close the content that I opened with the Menu button with the same button. I use scroll pause when opening the menu, but to cancel it "smoother.paused(false);" I have to use is there a method like toggleclass for this? Can you help me? The code i use; $(".hamburgerMenuOpen").click(function () { smoother.paused(true); $(".menu").addClass("visible"); }); //Hamburger Menu Close $(".hamburgerMenuClose").click(function () { smoother.paused(false); $(".menu").removeClass("visible"); });
-
Hello, I actually want to stop the scroll and parallax effects that are not normal effects on mobile devices. I used a code for this, but smoothscroll still works. can you help me? You can view the project here, thank you very much. http://clients.super-agency.com/test/dy/ I'm using the code below, it turns off the parallax, but the smooth scroll effect still works. I want browser default scrolll on mobile devices. console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); let smoother = ScrollSmoother.create({ wrapper: "#smoother-wrapper", content: "#smoother-content", smooth: 1, smoothTouch: 0.1, normalizeScroll: true, ignoreMobileResize: true, effects: ScrollTrigger.isTouch === 1 ? false : true, });
-
Hi, I want to do something similar to history. There will be years and articles and photographs of that year. And I want to make them parallax when scrolling horizontally. I created a demo codepen. I thought I did that because each panel class needs to have auto-width in itself, but everything overlaps. I am sharing a site as an example. https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html Thank you so much...
-
Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0
-
First of all thanks a lot for creating GSAP, it is amazing! I am new to gsap, I am working on a project where i intend to create 6 slides, which are both vertically and horizontally (fake-horizontally) scrollable. but withing one of those slides (2nd slide) I want to implement the below pen! I tried several approaches, but it does not seem to be working, I've been at it from 4 days straight, please help out! Approaches i tried: 1. simply added the code with some minor changes in "start and end positions" [ it did work, but there were 2 different scrollers, and not connected to each other] 2. tried horizontal: true [since it's "fake horizontal" it didn't work either] 3. containerAnimation -> well this almost worked, but "pin : true" cannot be used with containerAnimation. And i want the scroller to stay in view until the animation on 2nd slide is completely finished. any suggestions would be very helpful, thank you very much!
-
https://codesandbox.io/p/sandbox/gsap-and-fixed-positioning-test-forked-92gisp?selection=[{"endColumn"%3A32%2C"endLineNumber"%3A21%2C"startColumn"%3A32%2C"startLineNumber"%3A21}]&file=%2Fpages%2Findex.tsx&workspace=%7B%22activeFileId%22%3A%22cl8skx9ay000hlpge4cua49bz%22%2C%22openFiles%22%3A%5B%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22sidekickItems%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22cl9do5h5900gq496uufxj1u33%22%2C%22isMinimized%22%3Afalse%7D%5D%7D Hi, I need to explore using ScrollTrigger.start and ScrollTrigger.end properties, but they don't log the correct values; however, if I log the entire ScrollTrigger object, I see the correct start and end values. How can I solve this to get the correct values? -
Hey guys, I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g. Thanks for your help
-
Hi, I created an animation with scroll trigger (complex for me). Scrolling the section becomes fixed, and I have 2 different animations that repeat for 3 blocks. The animation I made works, but I wanted to use the optimized code for learn and correct. Thanks
-
code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?
-
Thank you for making this great plugin! 🙏 I'm trying to recreate the Shuffle and FLIP example in Svelte but I have run into a problem where it doesn't work when you reparent elements. gsap-flip.mp4 🔗 Svelte REPL https://svelte.dev/repl/0ebcbfc6eacb457f954cee131cc2075c?version=3.49.0 I understand how declarative JavaScript frameworks like Svelte recreate those elements when you change them but I assumed when it came to the FLIP technique that it only cared about the before and after changes based on some identifier like data-flip-id. I made another example using Flipping.js where it works as expected. flip.mp4 🔗 Svelte REPL https://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0 Thank you for your help! 😄
-
Hello, first of all, the problem is; I am making a project with gsap. I want parallax to work on desktop version and I have succeeded. When the menu opens, I wanted to pause the body scroll, which works successfully. But there was a problem. I can't pause sroll in mobile version because the project is not loaded in GSAP (768px) resolution. I want to pause body scroll in both mobile and desktop versions. I am sharing the code and codepen link with you. Can you help me? console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother; const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }); return () => smoother.kill(); });
-
Hello, I was using parallax in my project but I am using code to turn this feature off for mobile devices. However, when I did this, the parallax visuals became normal as I wanted. But I can't pause body scroll with scrollsmoother in this way. For example, when I open the menu, the page scroll works. I have such a problem, how can I solve it? I share my project link with you; Example https://yeni.dybank.com.tr/ If you try this link on mobile, you will understand more easily what I mean. Thank you so much.
-
hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js
-
there are five content horizontal sliders in the design, i want to achieve this, like each slide become active the round shape will rotate clock-wisely, after scroll up it'll rotate to normal state. Ive tried my level best, but couldn't figure it out. I'm a noob in gsap and js. hope some one helps me.
-
Hello! I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation. In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result). To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS. This is what I'm getting with Flip when trying to jump between the items. Any advice would be appreciated
-
Hello, in the example i shared in codepen, I only want to disable the parallax effect on the mobile device, can you help with this?
-
Hello, I'm using modal or popup in my project, but when I scroll, the modal and popup are not right there on the page. Can you help me?
