Search the Community
Showing results for tags 'stagger'.
-
Hey all! This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. When you scroll down, the bars scale up until they reach their full height at the end of the 'body'. What I want to simply do is have them 'stagger' on scrub, or if you will, each bar, starting from the left one, begins to scale up only when the previous bar has finished. I can imagine doing this with a scrubbed timeline, but is there an easier way?
-
I'm implement a animation like this (open door or window blinder) and I want it sync with scroll trigger, each scroll will open it a litter bit, how can I get this with GSAP? This is minimal code with a single animation (run from top 0 to bottom 100), it has many door (or blinder) https://stackblitz.com/edit/vitejs-vite-sgdz9y?file=src%2Fpages%2Fhome%2Fpage.tsx
-
Hi Everyone, I'm trying to create a smooth staggered fade out/float up animation for partner logos but having loop as well. My main issue here is that once the last desired elements are visible, it's not animating properly the same way to show the first ones. It's kind of resets the entire timeline without smooth transitioning. That's probably because of set method that I use to reset the animation, but didn't work anything else properly. Any advice or help please? Here's the codepen. https://codepen.io/VahahBio/pen/oNrGydp P.S. trying to make the replica of partners section from https://www.humaan.com/
-
I want to create the wave effect shown on the right side. I made several divs in a single line and moved them back and forth from top to bottom. I tried using gsap.fromTo(), which starts from the top and goes to the bottom, creating a perfect wave. However, the issue is that it starts from the top, but I want it to start from the center and animate outward. You can see the demo here: Codepen Demo To fix this issue, I used keyframes, but the stagger is not applying correctly. If we put `repeat` inside the stagger object, each div's movement should be individual and not wait for the entire animation to complete. However, it seems like it's waiting for the whole animation to finish before continuing.
-
Hello, Have been trying to use the stragger animation on my project. But there I want to add bit delay before it started. So will have the blank space for some moments then the 1st block will fillup. The codepen code is only for the specific section. On actual project(https://theoriatest.com/hyway) been triggering with scrollmagic
-
Hi, I'm trying to set a color in a staggered sequence. I want a sequence in which the letters "scale" up and down, one-by-one. As each letter is at it's largest size, the color changes. So, though after scaling up, the letter size returns to it's original font size, the color doesn't . In my demo, it starts with color purple, and end with color orange. Here's my CodePen, to show what I'm trying to do: https://codepen.io/CappMarvell/pen/RwmQvJX This works fine. I'm wondering if there's a way to simplify my code, instead of having two staggers, and having to figure out the overlap. Thanks. Stephen
-
Hello, I am new with GSAP and here I have a stagger loop that looks like a shockwave. The animations works like what I expected, but now I want to modify it so at the start there is no blank side and the loop run with 100% progress. previously, I try it using this method wave.progress(1); but, that's not working as I expected. Here's the demo to understands my point.
-
Hello everyone, I'm currently trying to replicate the effect demonstrated in the uploaded GIF. While I've successfully implemented the easing effect, I'm encountering difficulties with the stagger effect. I've experimented with various approaches, with the latest attempt shown below. I can prepare a CodePen example if needed. Perhaps I'm overlooking something simple. Any guidance or suggestions would be greatly appreciated. Thank you! useGSAP(() => { let proxy = { translate: 0 }, translateSetter = gsap.quickSetter(".video-grid-content-container", "translateY", "px"), clamp = gsap.utils.clamp(-40, 40); ScrollTrigger.create({ onUpdate: (self) => { let translate = clamp(self.getVelocity() / -100); if (Math.abs(translate) > Math.abs(proxy.translate)) { proxy.translate = translate; gsap.to(proxy, { translate: 0, duration: 0.4, stagger: { amount: 10, from: "start" }, overwrite: true, onUpdate: () => translateSetter(proxy.translate) }); } } }); });
-
How to adding stagger in this script, the stagger still not working https://codepen.io/cameronknight/pen/pogQKwR
-
Hey! I am using a Swiper with SwiperJS with scrollTrigger animation. My Problem is, that i want to stagger the slides. This does work, but it´s always using the value 1 to start with. Often the index one is in the center of the screen, but i want to start on the left side. I can get the Index of the left side using the swiper.realIndex but when i pass the var into the stagger, it will always use the inital value 1 and never updates. Unfortunatly repeatRefresh() doesnt work on stagger. Any Solution? Here is my code: const logoSlides = document.querySelectorAll('.intro--logos .swiper-slide') let refIndex = 1; var refAnimation = gsap.fromTo(logoSlides, { y: 100, }, { y: 0, delay: 1.1, duration: 0.2, stagger: { from: refIndex, each: 0.1, }, scrollTrigger: { trigger: ".intro--main", scrub: false, markers: true, start: "top 20%", end: "bottom center", toggleActions: 'play reverse play play', } }) refSwiper.on('slideChange', function () { console.log('slide changed', this.realIndex); refIndex = this.realIndex; });
-
Hello everyone, I hope that you all are ok. I'm having difficulty creating an animation and I'm asking for your help. I need to display messages one after the other. I used the stagger method but the previous message does not disappear ? Message 1 is displayed but it does not disappear to make way for Message 2. I hope you can help me. Adel
-
I've got a super-simple staggered tween that increases the height of a sequence of lines: let midPoint = 210; gsap.to('.eq-line', { attr: { 'y1': (midPoint - 30), 'y2': (midPoint + 30) }, duration: 0.3, stagger: { from: 'start', each: 0.02, yoyo: true, repeat: -1, repeatDelay: 1 }, ease: 'sine.inOut' }); What I'm aiming for is for the lines to do a Mexican-wave style animation from left to right, then pause and start again: so each line would go up-down-pause. However, what's currently happening is it goes up-pause-down-pause, because of the yoyo. I totally get why: yoyo is reversing the tween, and the tween has a repeatDelay, so it's simply applying the same repeatDelay when it runs backwards. But this isn't what I want, and I'm sort of struggling to figure out a graceful way around it. My 'best' idea is to just animate each line in a forEach loop and apply a regular delay of i * 0.02, but I feel like I'd just run into the same problem; plus I wanted it in a named timeline so I can control it from other areas of my code, and this method feels like it could get messy. Is there a straightforward way to get what I'm after?
-
Hello there, i have a bootstrap 5 dropdown with some items. I created a simple opacity & x translate stagger animation. When you click the dropdown and wait until the animation ends and then click the other dropdown all is fine, until you click fast between these dropdowns the animation breaks and gets bugged. Is there a smarter/better way to reset these animation? Thanks!
-
Hello, I have a projet on Nextjs with some GSAP for animations. I have created a simple Component for animate list of elements on scroll. But this time I need to make animation on scroll and when I click on "Voir plus". And I couldn't find how to achieve this behavior. If someone can help. Here is the codepen https://codepen.io/maxime-joyes/pen/poGVYzg Thanks
-
I have a simple demo with a few elements that are inside a grid and currently they all appear at the same time. I would like the boxes inside the box-group animate in one by one. I tried adding "stagger: 0.5", but obviously it's not working. What is the proper way to do this? https://codepen.io/planetgrafix/pen/OJdywRa -
Hi, I'm just wondering if it's possible to make something like this with GSAP and Help with any GSAP addon. When the users scrolls, the small pixels will independently fall into place forming an complete image. I tried to find some demo on codepen and no luck, Any reference or hint would be must appreciated. Thanks
-
This is how it looks on my localhost: 20230629-0604-06.4300693.mp4.168f158111a67ec4dbeac6b2db47861d (1).mp4 This is how it looks on my hosted version: Recording 2023-06-29 113710 (1).mp4 Any help why is it not working with vite tsx? I have another project in react jsx where this issue is not faced.
-
Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier
-
Hi, I am trying to work on this text scroll animation but I don't have an idea of how to go about it using gsap. Here is a link to what I am trying to achieve https://ibb.co/Hq1G5yB
-
Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.
- 16 replies
-
- 7
-
-
- scrolltrigger
- stagger
- (and 1 more)
-
Hi I'm running this very simple stagger animation, where I switch between 2 values on x by passing it a function, which was a common technique in gsap since ever. I noticed the animation behaves unpredictably and the staggers aren't linear, and seems it running 3 times and logging these their index values all over… I know i can use gsap.utils.wrap for this case, but this will be a common pattern in my GSAP animations and this left me wondering if somehow I'm messing up the way I should connect my GSAP animations to Svelte? Here's a Svelte REPL with the example: https://svelte.dev/repl/2add39882b9748758f2f8de72701cf0e?version=3.46.4
-
Hi, I want to make texts fadein and slideup when page loaded, then slideup again and fadeout when user scrolls down. But first letter not animated and hidden immediately. https://codepen.io/rokuta/pen/QWOwmYG I also tried fromTo instead of to for fadeout animation but it makes first animation flickers. https://codepen.io/rokuta/pen/WNXbzqR What am I missing? thanks
-
Hi all, I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually. What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close: https://codepen.io/camcgreen/pen/qBqMPQp but reveals each line as a whole instead of letter-by-letter. Additional requirements: 1. <a> tags be preserved in the title (as they are in my prototype) 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width. Is this possible with GSAP? Thanks! -
I am trying to stop the stagger animation in between. (check the codepen) I want to freeze the stagger at this particular state (below image). How to do it properly considering scrolltrigger is enabled as well?
-
Hi all, I'm sorry I can't duplicate this one on codepen, but I believe it's pretty straight forward. I am getting some data via an API-call and that data is displayed as a list of cards. So far so good. I would like to animate these card with a stagger when the user enters the page from the home page (like opacity 0 to opacity 1). I have been able to animte the whole card-container (<ListSection/>), but not each card on its own. I create each card in its own component (using react): <Card> <CardHeader>{name}</CardHeader> <PSmall>population</PSmall> <CardListHeader >{numeral(population).format("0,0")}</CardListHeader> <DetailButton to={`/data/${id + 1}`}>details</DetailButton> </Card> And then I use the Card in the List-component: <ListSection> {data.map((item, index) => { return ( <Card key={index} {...item} /> ) })} </ListSection> Some help please? Thank you
