Search the Community
Showing results for tags 'stagger'.
-
I’m building a loader based on the Hermann grid: a field of ghost nodes (intersections). Choreography: nodes are always visible; for each phase the nodes that form L then A are emphasized and edges are drawn between successive nodes. Next phase repeats at a different orientation/position (90° rotations + offsets). Questions Is my approach to connect nodes with DOM edges sound, or should I switch to SVG paths for precision/perf? Any cleaner pattern to define letter sequences? I’m using small helpers (row/col/diagDR/diagDL, offset, rotate90) and explicit arrays for L/A. Best practice to clear edges between phases without flashing? (I’m fading & removing.) For the intro ripple, is using from:[(N-1)/2,(N-1)/2] the right way to stagger from the true center on even grids?
-
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.
-
How to adding stagger in this script, the stagger still not working https://codepen.io/cameronknight/pen/pogQKwR
-
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
-
How to add stagger to scrollTrigger elements that are side by side
14136_1494126593 posted a topic in GSAP
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
-
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)
-
Bad performance when using a simple stagger with Scrolltrigger in Svelte
nvassalo posted a topic in GSAP
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
-
How to responsively reveal text controlling for line and letter
Chris Heuberger posted a topic in GSAP
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
-
Hi, I'm trying to make a stagger effect on the landingpage. The idea is, that the stagger displays when the user enters the site, and then no more. The problem is when you click on a link and then get back to the landingpage. The landingpage will then reload and play the animation again (which it shouldn't). I tried with "window.onload = function(){}". This works regarding only loading once, but in regard it completely removes the wanted background (since the animation doesn't run). So, with this in mind, I should have an animation that run once, and then stays in that "after run" state. I'm thinking something like: const [hasRun, setHasRun] = useState(false); inside the onload function: setHasRun(true) But this feels a bit hacky. This is not the first time I encounter this problem, so I would really appreciate some help to solve this. Thank you very much! https://codesandbox.io/s/gsap-satgger-1usqn
-
Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind: At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc. The problem with this approach is that I have to set `position: absolute` to each character. As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc. So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve. What do you think? Any pointer would be highly appreciated.
