Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'stagger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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
  2. 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.
  3. 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)}`);
  4. 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?
  5. 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
  6. 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.
  7. 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?
  8. 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.
  9. 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.
  10. 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
  11. 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.
  12. 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?
  13. 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 :)
  14. 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?
  15. 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. 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
  17. 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!
  18. 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.
  19. 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
  20. 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
  21. 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.
  22. In TweenMax 2.x, use TweenMax.staggerTo, first element yoyo repeat first. https://codepen.io/7up/pen/LYEpRXg But in gsap 3.x, use stagger attribute, first element start first, but yoyo last. not same result as above. https://codepen.io/7up/pen/bGNVwJp How, can I get the same result using gsap 3.x? @ZachSaucier
  23. I'm playing around with this amazing library. What I'm currently doing is to stagger animate a list of words. How do i stop the animation of a particular elem in the list while they're being animated one by one by TweenMax stagger method Requirement: If a condition is met, i want to stop a particular element in the stagger.
  24. Hey, I just have a question regarding behaviour of stagger methods callback onCompleteAll. onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that? Thanks
  25. Hi all, I’ve been wondering if currently there exists an easy way to target the 9 typical transform points of a box / grid with the new staggers? TL - top left TC- top center TR - top right ML - middle left MC - middle center MR - middle right BL -bottom left BC - bottom center BR - bottom right Those 9 reference points are common typical points of transforms. I see there is already various nifty calculations being done but is that 9 position logic also 'dynamically' possible even with reflow (like others) within the new advanced staggers? ¯\_(ツ)_/¯ Thanks everyone!
×