Jump to content
Search Community

Search the Community

Showing results for tags 'staggerto'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I'm trying to make this codepen example into React. But unable to do it with new version of Gsap and also new to GreenSock's animation. Here is the current React example in sandbox: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js
  2. I'm trying to use TimelineMax, but somehow I get the following error: "Unresolved function or method staggerTo()". That's how I import gsap: import {TweenMax, TimelineMax, Expo, Quad, Quint} from 'gsap' That's how I use it: new TimelineMax({onComplete: () => enterHoverAnimationRunning = false}) .staggerTo(letters, 0.2, { ease: Quad.easeIn, y: '-100%', opacity: 0 }, 0.04, 0) .staggerTo(letters, 0.6, { ease: Quint.easeOut, startAt: {y: '35%'}, y: '0%', opacity: 1 }, 0.04, 0.2); EDIT: Changing it kind of helped, thanks! But I still haven't achieved the effect I want - currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom.
  3. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal
  4. Hi, Is it possible using staggerTo to change the stagger value for each iteration so that it increases/decreases. So for example the stagger value would decrease .1 for each element Something like: .staggerTo('element', 1, {autoAlpha: 1}, x -= .1 ); Many thanks,
  5. Hello, I am doing some animation on my nextjs application, using jquery. You have the code in codepen. The problem is that app is SPA (Single Page Application), and every time a move to a new route, the menu in the left shows great, but the text takes time to render. The first time app loads, it loads just like in codepen. Then when navigate to other page, i need to wait 1 second for text start animate. Then move to another page and it takes 2 seconds to start animating and showing text. While the background from the menu is showing great. The problem i guess is with that staggerTo method, since that is the one that does that.
  6. Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!
  7. Is it possible to change the duration in a smart way on the last two elements in a timeline using staggerTo ? I want the last two green elements to go in a little bit slower than the purple ones. There could be 20 purple elements so I don't know the number of objects but I would like the last two to always go slower.
  8. Hi guys, I'm running into an issue on Safari with a function I've created that uses the _next, and _prev properties on a tween object. Here's the code: const copy = new SplitText('.copy-' + i, {type:'chars, words', charsClass:'chars'}) tl.staggerTo(copy.chars, staggerDuration, {onStart: caretForward, onStartParams: ['{self}']}, staggerDuration, label) function caretForward(tween) { if (tween._prev) { TweenMax.set(tween._prev.target, { borderRight: 'none' }) // this removes the caret for the previous character // tween._prev is always null when called in Safari } TweenMax.set(tween.target, { autoAlpha: 1, borderRight: borderStyle }) // this adds the caret for the current character if (tween._next === null) { // tween._next is also always null when called in Safari blink(tween.target) } } I'm creating a typewriter effect whereby the caret is created (by adding a borderRight to the character) in the onStart callback, and subsequently removed using the _prev property in the following tween. This works in every browser (including IE), however the _prev property seems to be always 'null' in Safari. Does anyone have any ideas on what could be causing this? Any help would be greatly appreciated! Thanks, Ryan
  9. Hi everyone, this isn't a question, just an observation! I was using TweenMax.staggerTo recently and was wondering why my tween was playing if I didn't pass paused: true, but if I did and then tried to use .play() I would get an error saying something like tween.play() is not a function. Turns out staggerTo creates an array of tweens, and arrays do indeed lack a .play() function. So if you plan on controlling the playback of a single staggerTo tween, you still should put it into a timeline Maybe this ought to be mentioned in the docs? Caused me quite the headache
  10. Hi all, This is something that I've been wondering about, but haven't worked out the best solution for. What I'm trying to do is animate an array of elements on the x axis by the width of each element. For example: element1 = 20px element2 = 40px Using staggerTo / staggerFrom, I'm looking to animate element1 by 20px and element 2 by 40px. I've attached a codepen to what I was hoping would work. Is it possible to do these kinds of animations using the "this" keyword?
  11. hey I've built animation only with gsap + lettering.js, instead I have a feeling that I needed to buy License for GreenSock club,, I'm sending this so you can check if I'm not stepping outside of legal bounds with this (I've basically replaced splittext => lettering.js) https://codepen.io/kpendic/pen/xYwRey?editors=0010
  12. The animation in the Codepen ends using a staggerTo animation. Some info regarding the codepen: It uses the data object to store each tween's settings. There are 2 ways of running the animation: Directly and from the stored data (see above) The initial animation (what I'm calling the direct animation) runs when the page loads and if you click the REPLAY button. Each time it rebuilds using some random settings so runs a little different each time. When you click the PLAY FROM DATA button, I run a function that I'm using in my local app called getGsapData to snag all the data from the timeline and then pass that data to an animateFromData function to exactly replicate what was created randomly. (I have to be able to store the data in a file locally so can't just store the timeline itself. ) THE ISSUE is that when the direct animation runs, the ending staggerTo animation seems to animate each of the items out all at once. But, when you run the animation from the storedData, it seems to animate off the way it's meant to work - staggered. I've been trying to figure out what's different between the 2 for two solid days. Can any of you guys (most of whom are much smarter than me) possibly figure out what the deal is? I can change the staggerTo params in the initial animation and it doesn't seem to change the way the animation runs on REPLAY. The animation data gets sent to a textarea and prints as a pretty json string for perusal. So sorry for the complexity of the codepen but for what I'm attempting to do, I didn't see much I could do to both replicate the issue and simplify the example. I actually did remove quite a bit of stuff.
  13. I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }
  14. Hi, dear GSAP-community, I would like to animate an :after element width "staggerTo" and did read up on the "CSSPluginRule". What is unclear to me: - Is this plugin already included in TweenMax or not? If not, is is there any way to download it separately? (I only fund the configuration download, which include TweenLite...) - Is it even possible to use a "staggerTo" anim on pseudo elements? I prepared a pen, but that one does not work... Any tips would be greatly appreciated - thank you!
  15. Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax(); tl.to(".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
  16. Hi Is it possible to add a staggerTo or staggerFrom to all the lines of text in a paragraph programmatically? I appreciate I could wrap all the lines in spans, but it's part of a piece of text that won't be fixed in size, so the number of lines will change dependent on device, window size. Also, is this a bad idea generally in terms of performance? I've included a codepen above with two paragraphs that are part of a stagger, but I was wondering about having each line stagger (note: if it is possible I would put all the text within one element / #id. I just did two elements in the example so i had something to stagger). Any ideas / suggestions welcome. Emily
  17. I'm setting a delay as a negative number to simulate staggering. I'm wondering if there's a better way to achieve this with nested timelines.
  18. When targeting a single class in Vanilla JS staggerTo doesn't seem to work correctly, when using a array of classes it works fine. Works fine if using jquery in commented out code. Please advise.
  19. What is the syntax to pass the index value of a StaggerTo tween to another function via OnUpdateParams? I've tried: onUpdateParams:[$(this).index]} onUpdateParams:[{self}.index]} Neither of which are working. See pen for example. http://codepen.io/rfenik/pen/gmeNEp Thanks.
  20. This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. http://codepen.io/trshelto/pen/YZQPwd/ TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);
  21. Hi there, (I open a new ticket. The original question was here: http://greensock.com/forums/topic/15056-help-getting-started-creating-a-jalousie-effect/ but that topic is already answered and my question probably won't be seen anymore.) The CodePen shows some variation of a jalousie effect, that Shaun posted as an example in the forum post mentioned above. Playing around with that (mostly adapting it to vw and vh), it happened at one point that there was a "running shadow" introduced. It happens very subtle after the second animation is coming to its end: the slices are fading out, and just a tiny little bit later the slice flashes up for a moment again in a very, very bight grey. Hope you can see that. I was wondering, why this "running shadow" effect is happening? Thanks for any hints!
  22. Hey, I'm having some trouble with GSAP and the .staggerTo. The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! Here the code : for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseenter', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat"; videosBg.style.backgroundSize = "cover"; if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:-20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } else { tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } }, false); } for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseleave', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } else { tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:-20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } What i'm doing wrong ?
  23. Hi there, Having a bizarre issue with Callback functions within a repeating timeline & I can't seem to resolve it! I'm fairly new to this, but I can't seem to figure out / research what I'm doing incorrectly. What I'm attempting to achieve is this animate div in let it sit for 2 seconds animate div out move onto div with same class rinse / repeat Like I said I'm fairly novice, but I know I need to use a timeline because I'm planning on stopping the animation at some stage. Any direction would be greatly appreciated Cheers! Matt
  24. Hello there, I'm a complete newbie: I animate this logo: https://codepen.io/silverdesk/pen/ORromA The code is a mess, I had to create 6 timelines to do the same. How can I make it a function, I figure StaggerTo() will do it, but I can't find way to chain multiple morphSVG ... Is this possible? Thanks in advance.
  25. I have a simple script that changes images opacity, and need to use onCompleteAll, but it seems neither it does work with TweenMax nor with TimelineLite, I checked on latest versions of FF and Chrome, win7 my code looks like this: $('img.normal').css('opacity', 0); TweenMax.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2); function doSth() { console.log('tweening done'); } neither this one works: var tl = new TimelineLite() tl.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2); onComplete works, but that's not what I need Any help please?
  • Create New...