Search the Community
Showing results for tags 'stagger'.
-
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
-
Im using GSAP ScrollTriggers to animate stuff in when they enter the viewport. Right now im using ScrollTrigger.batch to stagger animations inside my footer. It works somewhat fine. but the triggers them self seem kinda random. When i have markers turned on, they for the most part seem to work as intended. But only because the markers extend the bottom margin of the footer and there by extend the height of the page. But sometimes, the markers end up above the footer, and trigger the animations before they are in the view port. If i turn off the markers the most common result is the same as above. they get triggered before they are in the view port. with the added bonus, that the last elements, the links, dont trigger at all. I also recently discovered that on bigger screens, it seems to work fine. I was wondering if it is possible to set the footer tag it self as the trigger so that when it enters the viewport, it triggers the staggered animation of the span elements. How would I go about doing that? Thank you in advance for the help
-
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.
-
Recreate CSS Text Keyframe animation in GSAP with TextSplit Plugin
WebgenStudio posted a topic in GSAP
Hello, I'm new to GSAP and wanted a little bit of help with one of my projects. I'm trying to recreate the text animations in this codepen https://codepen.io/kh-mamun/pen/NdwZdW. There are seven different text animations in this codepen. If someone can help me by just recreating only one of the animations as I cant quite grasp how to perfectly time keyframes with staggered animations. Here is one of my trials for the animation called "revolveScale" in the codepen or also tagged with class "one": var char='.char'; var duration=5; var tl=gsap.timeline(); tl.fromTo(char,{x:-150,y:-50,rotation:-180,scale:3,opacity:0},{stagger:{amount:duration*0.6},x:20,y:20,rotation:30,scale:0.3,ease:'none'}) .to(char,{stagger:{amount:duration},opacity:1,ease:'none'},"<") .to(char,{x:0,y:0,stagger:{amount:duration*0.4},scale:1,rotation:0,ease:'none',delay:duration/char.length},`<+${(duration*0.6)}`); -
Hey all, I'm trying to experiment with SplitText, So I have a simple menu with submenu, blue colored menu items have children, when user click on it first level menu items will move up and submenu will appear from bottom, I want to use stagger for each char, but stagger also will be implemented for menu items, what I don't want. I understand that I'm doing it wrong, but I can't imagine what should I do. Can you help me, please?
-
Hello! I would like to animate a stagger tween from the last element. For instance, start a splittext animation from the last word. I can't use tweenmax.reverse() because my stagger animation is a part of a timeline. I tried different combination but it did not work as planed. Here a sample of the timeline. var tl = new TimelineMax(); tl.insert(TweenMax.to( arrowP,0.6,{css:{left:0, opacity:1}, ease:ease1})); tl.insert(TweenMax.to( arrowP,0.2,{css:{left:40, opacity:0}, delay:0.6, ease:ease1})); tl.insert(TweenMax.from( arrowSpan,0.6,{css:{left:-200}, delay:0.2, ease:ease1})); tl.insert(TweenMax.staggerFrom(mySplitText.chars, 0.2, {autoAlpha:0, x:-40, delay:0.2, ease:ease1}, 0.02)); So, do you have an idea of how I could proceed if it is possible ? Thank you so much for your help!
-
I am learning for the first time using gsap. I am also a beginner and still learning web development. I am having trouble trying to get my cocktail images to stagger and move into view when scrolling, I am not sure how to do this? Could someone help please? I have an assignment I need to hand in I have attached a only a note pad txt file as it wont allow me to upload my site due to the size. COCKTAILS.txt
-
Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.
-
So it's more visible in Desktop than in mobile but elements are stuttering when using stagger. I have uploaded a portion in codepen and you can see it on the website I used GSAP as well: https://shoaibahmed.dev If you look at the buttons ('Check on Github' and 'Live Preview') in that website, you will see that they are stuttering just before they reach their position. Is it something I am doing wrong?
-
Hi All, I'm looking to stagger the display of a list of items, I only want 1 item to show at once. I have knocked up an example using jQuery but can't figure out how to utilise GSAP for the same action. Ultimately, I want to control the fade and scale of each item as they appear and disappear. Any help appreciated
-
Hello, I'm new to GSAP and very happy with it so far. I have an interesting problem and I can't find any codepens or topics containing useful info. Actually I am not sure if this is even possible. What I'm trying to do: Elements are fading in inside a section, when you scroll to it. When you scroll past it the elements fade out again and when you go back up they fade in again. I'm using stagger to animate the elements inside the section. Is it possible on scroll up to reverse the stagger effect, I would like the elements to fade in from the last one to the first, but only when scrolling up. I know that using a negative value for the stagger does that, but I'm not sure if you can combine it with the toggleActions somehow. All ideas are welcome, thank you :)
-
Hi guys, I am new to GSAP animations, I love everything about this framework. It has made so many lengthy tasks very simple, short and fast too. But unfortunately I am stuck at one point. If you go to my codepen demo, when you click on 'button', you will see a stagger animation which is working fine. I have 6 boxes there and the 5th and 6th number boxes overlaps the 1st and 2nd. I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in.
-
I'm trying to have texts scroll up one by one, then pause at a certain point and then continue to scroll up while fading out. I have almost achieved this using ease functions for both the first stagger where the text fades in and moves up and the second stagger where the text continues up and fades out. However I want the text to pause briefly in the middle after the first animation. Since I'm using a power function for the ease I don't know how I can set the delay between the two animations to also be a power function so the timing works out. I'm just starting out with GSAP so I may be going at this animation in the wrong way. Any help much appreciated.
-
Hello all. First of all, I want to emphasize that this project is purely for practice purposes. I'm trying to get better at GSAP so any suggestions at all to improve my code or approach to this problem in any way are welcome. I was inspired by the level change screen of the video game, Just Shapes & Beats. If you're not sure what this is, check out this video. I made sure to time stamp it so it starts at the exact point it happens. I wanted to try to recreate this. To start, I programmatically generate 100 divs, attach event listeners to them, and use flex to space them out evenly. When a box is clicked, I use two arrays to separate the boxes that are above and below the target. Once I have those arrays, I loop through them and create a tween for each one that gets added to a timeline. Once that's done, I play the timeline. Here's the problem I'm running into. Because I'm creating tweens for every item in the array, I don't really know how to stagger them. I can't just use a class, because that would target all of them and they need to animate differently based off if they are above or below where the user clicked. I tried adding a delay to each tween, but the problem with that approach is when the animation for the blocks above the user click happens, the last block is delayed the greatest which is the opposite of what I want. That's my specific problem. But again, if you just have any general suggestions for a better way to approach this, I'd love to hear it. I'm still very much in the beginner stages of GSAP. Thank you. Edit --- Here is a debug link. It seems to show the animation better than the preview window inside codepen. https://cdpn.io/DDI-Web-Team/debug/06180d06502c57364e0a0f3ae563e79f
-
I've got a bunch of elements I'm doing a stagger animation on. I'd like to set different properties (say scale/position) for each of these elements based on index of stagger. Is there a straightforward way of doing this with a single gsap call? The current solution I'm thinking of involves looping through the elements to get index and setting the properties and delay as per this with individual gsap calls in the loop. Any ideas are appreciated, I didn't make a codepen cause I felt like the description explained it well enough.
-
Hello Folks, I have a specific case which I am not sure how to handle: I have an array of PIXI Sprites that I would like to stagger to another set of X, Y coordinates. While they each have specific start coordinates assigned to them, their destination coordinates are defined by an offset from a target destination point. The effect that I want is for the sprites to tween in formation - think of a squadron of planes, or a vee of geese, flying together in formation. What I need to accomplish this, then, would be not unlike the map function where I can iterate through an array of objects, setting their tween properties dynamically, without hard-coding the destination coordinates in tween config object. Is there a built-in function within the stagger property, that would give me access to the current instance so I can access its destination coordinates? I was thinking I might be able to hack the stagger's function(index, target, list), but how can I set a tween within a function that is out of scope of the timeline's config object?
-
Hello! I am trying to animate a puzzle. I would like to make each piece appearing from the top-left of the svg puzzle without success. For the moment, as shown in the codepen, it's completely random. Any suggestion?
-
Hi guys I really happy with gsap3, and I was waiting for it for very log time ?, but I now facing a very weird problem I'm animating some labels with gsap timeline.from to make them appear one by one "a really simple animation" but opacity is animating from 0 -> 0.003 or 0.06 also this is the same with scale from 0 -> 0.08 or something like this i'm using react-js but I don't think this is the problem useEffect(()=>{ labelsRef.current && tl .from(labelsRef.current.getElementsByTagName('mark'),{duration:1,opacity:0,stagger:1},0) .fromTo(labelsRef.current.getElementsByTagName('label'),{scale:0},{duration:0.5,scale:1,stagger:1, ease: "back.out(4)"},0.5) },[labelsRef.current]); when I animate the scale by fromTo everything works perfectly Am I doing anything wrong ???? Thank you very much
-
Hi everyone. Firstly, I'd like to say thanks to an amazing forum, I've learnt so much here over the last few weeks. The effort you lot put into this is unreal. Unfortunately, I can't seem to find a solution to the issues I'm having, hence this post. I'm trying to stagger animate a list in and out that changes length and properties. I'm using gsap3 with react hooks. I'm sure this is common and I'm just approaching it wrong so I would really appreciate someone taking a look at the link below: https://stackblitz.com/edit/gsap-react-listobject-stagger Thanks so much!
-
Stagger Animation - Any way to animate out an element when removed from target array?
Jacklifear posted a topic in GSAP
Hello. This is a basic question regarding my StaggerTo animations. For scope of this, I'm using 2.x still and am using StaggerTo to animate a hand of cards and all of them work beautifully when adding new references to the array. When adding a reference/element to the middle of any stagger or removing an element from an array, I get some experiences I didn't expect. Delete from the array: It doesn't animate out or in reverse as I expected, it just "pops" out of existence. Example: https://gyazo.com/a6cb14ef2b75f9dd40eaf4393581db93 Add to middle of an array: The index and all items after the index are removed, and then they are animated in afterwards. Example: https://gyazo.com/d8e710656e77aeab1ad67110325b871d After research I'm not able to find out if there's a way to work a different stagger, or a setting that can be flipped to enable animations when an item is removed from the array. Or is it this way by design? I looked into make a codepen example, but I lack the skill to recreate the React Hooks + GSAP in codepen in any semblance of a reasonable timeframe, figured with this question it could be a quick answer before I potentially tried to do a lot of work for something that could be as simple as "not by design!". If anyone is kind enough to read and respond to this, I would greatly appreciate it. -
hello there, I am working on a stagger which scales down to 1 from 1+(0.1*index of array) I am tryin to reverse it but I cannot use .reverse() because I am changing some values in other tweens I have to create a new timelinemax and do the reverses one by one. the scale is 1 and I needed to increase to 1+(0.1*index of array) how can I write different values to scale I can create another timeline and reverse this one but it will be better if I can write to different values. thanks
-
Hello, I was wondering, does anyone see lag when playing animations on Firefox? I made just a few animation so far as I am a "newbie gsap coder", what I have experienced is that those animations are smooth in chrome, safari and IE but they lag a lot in Firefox. At first I thought I was coding in the wrong way my scripts but then I saw that even the animations in the "Examples" page have the same problem (eg. https://www.reputationsquad.com/). What I see is that this doesn't seem a GSAP problem but is like Firefox is having hard times with all kind of animation methods. I tested it both on my macbook pro retina (late 2015) and on a mac mini, in both cases if I try to open a website like: http://beta.wind-and-words.com/ (examples page), the fan start working at max power! Like when you render an After Effects animation with all your cores. Do you have the same problem? Do you know any solution or workaround? Thanks guys!
-
Hey any tips or suggest to perform a kind of reel infinite random motions? I find my approach too redundant. Example on text matrix? I get a random behavior, but alway same from looping ! this is currently the code startMotion(){ const List = this.child.Master.children; //words //!motions words if('option motions words'){ gsap.staggerFromTo(List, 0.5, {alpha:0},{alpha:1, ease: Power1.easeIn}, 0.4); gsap.staggerTo(List, 4, { x:()=>`+=${Math.randomFrom(4,-8)}`, y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2); }; }; What i would like it a way to compute a random range from a radius ? but alway random after loop cycle. Do gsap have a native easy feature to perform this? suggest welcome
-
I'm working on animating a grid of threejs boxes and I would like to implement the grid option available in the stagger object of the timeline, but when doing so I get an error: The example code only shows how to use the stagger options applied to DOM elements so I wonder if I'll need to create my own objects with properties that the grid optins will understand, which I can easly do, but I dont know what it is required. Hope that makes sense. Here is my setup: - There is an array of threejs Meshes layout in a grid - I want to create a timeline to animate all elements in the grid using the stagger grid options like: stagger: { amount: 1.5, grid: "auto", from: "center" } - But I'm getting the error quoted above Any help will be much appreciated.
