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

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. Hi everyone, Only started using GSAP yesterday, until that point I was using Velocity.js on the basis of the rather disingenuous test that was originally listed on Julian's site (intentionally or not!) So anyway I discovered that GSAP dunks all over it and I wanted in! So, at the moment I'm making a UI pack for GSAP, since that was one of my most used features of Velocity, and it's great for front-end delights. It's going really well and I've taken to GSAP fairly quickly--but some things still elude me. One thing I'm trying to achieve is to do with one of the animations I've made, it's a 'shake', these are my first with multiple tween points, and I'm trying to figure out the way I'd go about successfully staggering a whole sequence on an array of elements. E.g. case 'stagger.shake': animate.to( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "0px", ease:easing} ); break; My initial approach was something like this: case 'stagger.shake': animate.staggerTo( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "0px", ease:easing}, stagger ); break; I'm sure one of you guys knows exactly what I'm missing! Seems like a great community here and looking forward to becoming a part of it. GSAP is awesome. And not in the desensitised meaning of the word, like genuinely awesome!
  2. This is a beginner question—I'm just getting in to this—I notice that stagger methods seem to be for staggered application of a tween, as opposed to being able to stagger a timeline. This pen is the only way I could think of, to stagger the application of a timeline animation. In this case, it's applied to 100 red boxes, but I'm not sure if it's the best way of doing it, in terms of memory etc. since it results in the creation of 100 TimelineLite instances... is there a more performant or concise way of doing it?
  3. So I'm wondering how I can create a menu like this (Yes, I did kinda copy stagger example from GSAP sorry) but for the .btn elements to initially not display (ie; display:none instead of just no size). then when the 'Click' button is pressed, the .btn elements animate onto the screen. I can get it to work once but after i have clicked one of the buttons and they off, they will not come back. Any help would be greatly appreciated.
  4. Hi i'm trying to create stagger effects on my app dashboard, but the problem is i follow all the documentation guide lines, but there is no way to create Stagger that trigger different directions. only the given parameters and all object stag to the same pattern, but i need to stagger it from different directions. eg : Use case scenario that i'm trying to archive. 1). Top bar comes in document top position 2). Sidebar comes in right side 3). Body element comes in bottom and so on.. i know i can use Timeline Max for this situation, but i need to create this from stagger Effect for re-usable purpose. and trigger from click event
  5. Hey I have a website which generates posts and I was wondering if I could use the stagger animation to Tween them from opacity 0 to opacity 1 on page load. The amount of elements differs since the website is dynamic. It is structured as follows. <div id="message-container"> <div class="message1"> <div class="message2"> <div class="message3"> etc... </div> I want to animate the divs with class .message<insert number>. Is there a way to do this by targeting the child elements of the message container and then doing the stagger effect on that?
  6. I want to create an effect that it will load my web page gradually from 1 div to another once the page load. I have applied staggerFrom() method so that it can create the desired effect that will load from the header follow by content and extend till footer. But my problem is that when I put it on live server, the webpage will load the animation even though the content isn't fully loaded, resulting in freezing the animation for few seconds.... Is there any solution for this?
  7. Simple question regarding TimelineLite / TimelineMax .add() with Stagger: Is it necessary to do this: tl.add([tween, tween, tween], "+=5", "normal", "stagger", 5); // shown in documentation example or would you do this: tl.add([tween, tween, tween], "+=5, "normal", 5); // what I would expect to do
  8. Hello. Thanks for the priceless GSAP. However, not sure why stagger isn't honoured with this code: function getButtonsInAnimation(callback) { var i, spots, spot, tween = new TimelineLite({paused: true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tween.add(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:290, top:168}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} ), undefined, 'start', 0.05); } return tween; } As you can see, I'm adding new TweenLite object with TimelineLite.add() method. But it executes added tweens in sequence, ignoring the stagger value. Also tried to pass stagger value to the TimelineLite constructor. Same result. As of position property of TimelineLite.add() method, I also tried values, without any luck: '+=0', 0, false. Is there something I misunderstand?
  9. I'm creating Staggers automatically from text lines. Some lines contains more letters than others, so i end up with a different durations. How can i create staggers with the same duration but different number of elements?
  10. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
×