Jump to content
Search Community

Search the Community

Showing results for tags 'label'.

  • 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. Hi, I can't make this animation do what I want it to do, I can not understand why. I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false. My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none. What is wrong with this code? Thank you. btn_menu.addEventListener('click', (e) => { e.preventDefault(); menuAnimation(); }); var tl_menu_animation = gsap.timeline({ defaults:{ ease: "power2.inOut" }, paused:true }); tl_menu_animation.addLabel('start_menu') .set('#nav_left,#nav_right', {autoAlpha:1}) .to('#nav_left,#nav_right', {duration:0.7, scaleX:1}) .to(nav_elems, {duration:0.4, autoAlpha:1}) .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) .to(nav_elems, {duration:0.2, autoAlpha:0}) .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0}) .set('#nav_left,#nav_right', {autoAlpha:0}) .set('#nav_left,#nav_right', {scaleX:0}) .addLabel('end_menu'); function menuAnimation() { if(is_menu_active) { tl_menu_animation.tweenFromTo('pause_menu', 'end_menu'); is_menu_active = false; } else { tl_menu_animation.tweenFromTo('start_menu', 'pause_menu'); is_menu_active = true; } }
  2. Hey everyone, I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it. The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons. All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side. What would be the best way to tackle this? I've had two thoughts on how to approach it. Single Timeline Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above. Multiple Timelines Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks. Which of these is the better pattern to take, or is it worth doing it completely differently? Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above. Any help would be appreciated! Thanks Sam
  3. Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete
  4. I have an element that is by default set to opacity:0 and then first set to 0.5 and then to 1 via GSAP. When I use a label for the timing the element is not reset to 0 but to a random (?) number somewhere between 0.3 and 0.5. Does restart() not reset all parameters? Thanks!
  5. ajando

    Loop certain area

    Hi Im relativ new to gsap and im also not that big of a JS geek, so I'm trying to fiddle my stuff with the forums and the documentaries. But now i got kind of stuck... Im trying to draw those rings (see demo) and afterwards let them do this wave thingy. After that, it should repeat at .addLabel('start') I tried the seek(); staggerFromTo(); and other stuff (e.g. http://jsfiddle.net/geekambassador/eMGsc/), but it might be also a small syntaxerror? Maybe someone can help me Greetings
  6. Hi, Is it possible to create a timeline that after playing for the first time, when it repeats it starts from a different point in the timeline? In the example below (CodePen included) I'd like the timeline to play through once from the start, and then after this when the repeat kicks in I'd like it to start from the "start" label. It will basically remove the initial fading in off all the elements after the first play. var tl1 = new TimelineMax({repeat: -1}); tl1 .to(".box", 2, {opacity: 1}) .add("start") // would like animation to start from here when repeating .to("#box-1", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-2", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-3", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-4", 1, {scale: 0, ease:Power0.easeNone}) Many thanks
  7. Hi Gsap'ers. Is there a way to go to a label other than just jumping? Example: When clicking the button it goes from the current point of the timeline to the label, but keeping the tweens in sequence.
  8. Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo
  9. First of all sorry for not posting codepen URL, for some reason, my code isn't executing on codepen. Below is the TimelineMax code I prepared for the kind of animation I need. tl .to(panel1, 0.3, {width:'50%',ease:Power3.easeOut}) .to(panel2, 0.3, {left:'50%', ease:Power4.easeOut},panel1) .to(panel2, 0.3, {height:'50vh',width:'25%', ease:Power1.easeOut}) .to(panel5, 0.3, {width:'25%',height:'50vh',left:'75%'},panel2) .to(panel3, 0.3, {top:'50%'},panel2) .to(panel3, 0.3, {width:'25%',height:'50vh'}) .to(panel4, 0.3,{left:'75%',width:'25%',top:'50%'}); You could see how panel2 and panel3 have more than one ".to" that is because of the kind of animation I need where panel2 should first get to 50% left and then get to 50vh height, 25% width. Now, I want panel5 to follow along with panel2 but not the first panel2 but the second one. How can I target only the second panel2 (the one with height: '50vh', width:'25%') for the panel5? Hopefully, it makes sense to you. Thank you so much in advance. Any help is appreciated.
  10. Hi, I'm spinning a three faced pyramid object using rotateY. I've set up a TimelineMax consisting of three tweens with labels correspoding to points where each face of the pyramid is fully in front of the user. When the pyramid is hovered on, I'd like to tween to the nearest label, such as to reveal the nearest "face" of the pyramid completely. On the codePen, I'm using the "currentLabel()" method which tweens the rotation to the "previous" label successfully. However, if a tween is past it's "midpoint", I'd like to tween to the next label, which is "closer" to the current position (it will take less rotation to reach it). Maybe there is some already established / most elegant way to retrieve the "absolutely nearest label" to current transform ? Hope this makes sense, thanks !
  11. Hello, I'm trying to use the method seek() to jump to a label in a nested timeline. The real example is a bit complex to reproduce in a codepen so I constructed a useless one just to show the issue. Baically I have a series of small animation contained in a another animation. This animation (the external one) has a duration equal to all the small animations inside. I would like to be able to jump to each of these animations, but apparently I can't. I'm sure there's a good reason for this, but is there any way to achieve what I'm trying to do?
  12. I am using https://github.com/scottschiller/SoundManager2/ to play sounds in timeline. I am trying to launch "empty" animation with sounds execution using labels. So i would be able to define sound once, and then just repeat it with other animation in the future. Sound in codepen shoud play 3 times but it plays only once. What's wrong?
  13. Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender: false }) ], '+=1'); tl.add('slide' + (i+1)); }); }); Notice that I'm also adding a label after each step. At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3. I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this: tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1'); What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter. Am I again missing something about the position or my approach is totally wrong?
  14. Helo guys, I need some help with a little issue that is driving me crazy. In the codepen I have attached I am trying to animate three balls each one with it's own timeline and I have an animation handler that depending on the stage on which the app is it will move the animation point to one point or another of the timelines using labels. The animation when moving from the loop and seeking the 'animationOut' point should move to the top and out but keeps looping inside the 'loop' label step. The seek function (lines 75, 80, 85, 91, 96) seems to not be working correctly. I am using version 1.19, if using version 1.10 it works for the label called 'animationOut' but not for 'animationReverse'. Can you guys help me out please? Cheers!
  15. Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help
  16. Hi, I have a pageless site that I'm working on, that has a slightly unusual navigation/ flow. I've got it working almost as it's supposed to. There's two main ways for a visitor to navigate the site. Note: the pages/sections are not presented in a linear fashion. 1. By scrolling they will move on to the next "page" or section. 2. Through the navigation menu they will go directly to the section The issue I am having is can't quite figure out how to make the whole thing loop continuously. When they get to page 9 and they continue to mouse, I'm trying to get it so they just go straight back to page 1, and if they mouse up from page 1 it will take them to slide 9 Any guidance is much appreciated!
  17. Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
  18. Hi . This is my first time using GSAP. For a pretty simple task, in theory. I' using two timelines, with 2 phases. In each timeline, I animate the width. In the first phase, with a time «stime», While the first timeline is decreasing his width, the second, grows. In the second phase, with a time «btime», the first timeline increases his width, while the second, decreases. Well, there are two timelines, where they first grow in a direction, and later, they grow in the opposite direction, changing the time. I have a pair of buttons, «+» and «-», where we can change the time used in each phase. The time of a phase only can be change when the animation is paused in that phase. If you pause the animation in phase 2 and try to change values of phase 1, it will be ignored. When you are in the correct phase and the time is changed, the animation is seeked to an initial position fixed for that phase. For this, I declared 2 labels, «work», and «rest», that represents each phase (this is for a Pomodoro timer, that's is the reason of that names). Well, my problem is that this works with phase 2 («rest»), but won't with phase 1 («work»). I have tried with «seek», «tweenTo», even «set» and «restart». Anything appears to work. It get stuck in the position where it was when I hit the button, and starts from there in every new loop pass. I think that the problem is that time for label «work» is set to 0. Because I want to move at first position. I know that this should work, because I check other pens in the site and changed label to zero, and all work. But I don't know. I have made a codepen with a «simplified» version, that shows my problem. Any help will be welcomed. Edit: I just saw again the title and thought it wasn't pretty accurate, but it seems that I can't change it now.
  19. Hi! I have a timeline animation which I would like to reverse, without reversing the last two tweens. In my jsfiddle example http://jsfiddle.net/identitoe/oLpvfqm4/2/ I would like to keep the last two tweens, the margin-top and the background-color and start reversing from the point I added the label. I just don' get it to work. Thank you
  20. Greetings, Is there a method to fire a function when a label is reached in a timeline? Thank you, Steven P
  21. Dear GSAP and fellow GSAP users. Although I found a workaround, as I expand my usage of your api, I thought it might be useful for me, and maybe others, to create a discussion based on what I encountered I've added a codepen as this is good practice, but it's a completely stripped down version of what is actually happening, as it is not possible to include everything, and what I'm after, seems to me to be something fairly straight forward. Scenario I have a timeline (small snippet in codepen) that simply animates some text, but which includes calls (removed from codepen) to external (unconnected to the animation) functionality. The timeline works great, and all the controls I've included do exactly as expected - accept that what I want to happen is when a user pauses the anim, the text acts gracefully and moves back to the starting position (css only, not timeline), as I don't want the text just to be stuck mid flow. I handle the external calls perfectly and the paused state is fine, all I want is the css side to be cleared. Ok so I tried the clearProps:transform || all etc (via a set command, and injected at different time points**), I also removed props/data/attr etc etc, but the transform on the text resolutely remains, if the timeline is either playing or paused. If I clear first, then clearProps works. For completeness, I tried killing the current tween (which I don't want,but as a test), didn't do anything. I tried using the timelinemax calls to get current/before/after labels, but since this moves the play head, but not the external function calls, I cannot use this. **Now I've read conflicting posts that say it is possible to use clearProps on working timelines as GSAP doesn't force continual transforms, and others that say it is not supposed to work in that way. I believe the default is for overwrite between tweens so wouldn't this allow another tween to take precedence? I'm pretty sure a tween is added to the end of the stack, as per api and probably explains what I'm seeing. I used $('.key-shortcuts').children().removeAttr("style"), which seems a rather blunt force approach, as it clears all styling, whether GSAP related or not. (but then looking at the code I think clearprops does the same?) Based on my scenario what would be the GSAP way to clear (or manipulate) the added css in a working timeline paused or otherwise? One final question, I quite often want to base one tween in relation to a previous label, but also want to label that very same tween. e.g. t1.to(some el,1,{some css},"label1+=1","but also be labeled itself?"); Is that possible? Btw, GSAP is just great, I had used it before mainly for the performance boost, standalone or as a jquery override, but for some reason I missed the timeline aspects. It's brilliant, I've already started removing the hugely ugly jquery way Thanks in advance
  22. Hello! I posted once before about a similar problem, and I was able to workaround that problem easily, but this one is a tad different. In the codepen sample I provided, there are 6 color blocks. Each one is animated in its own timeline, and each timeline is then nested in a master timeline. In this master timeline, I set up a pause at the end of each nested timeline, so that playing the timeline only plays one scene (or, in this example, one animation) at a time, then pauses and waits for the user to press "continue". It is also paused at the start, so you must press "continue" to see the first block. In the linear sequence, all is well: run the codepen and press continue at the end of each block's animation and the blocks animate in when and as expected. The following steps, however, cause a problem: 1. Run the codepen 2. Press continue to display the red block 3. Keep pressing continue and finish the sequence so that all blocks are on-screen 4. Press the button labeled "Orange" and see the orange block animate in as expected 5. Press the button labeled "Blue" and see the green block animate in As you can imagine, the blue block should have been the one to animate in. In addition, I am firing events on each block animation's start and finish, and the events fired for step 5 are two start events for the "green" block and 1 finish even ("green-done") for the green block. The "blue" event never fires. I'm at a loss. Anyone have any idea why this isn't working, or what I'm doing wrong? Effectively, having these "jump-to-scene" buttons is crucial for a project, so any help would be very valuable. Thanks, Frank
  23. Hi, Maybe I did smthng terribly wrong, but I think I found an issue in GSAP 1.14.2. play('label1') doesn't work correctly. If I use the GSAP version: beta 1.8.2 it does. Thank you! Grtz Dennis
  24. Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
  25. Greetings one and all. Hopefully Christmas brought your family together. Thank you in advance. I have a need to update a dynamic text box when a new label is reached. The animation is a sequence of lines drawn, points reached and then the point animated, and an image faded. This all works quite nicely - Jack, your packages are _amazing_!! What I would like to do is as best I can explain: as each label is reached, a dynamic text box is updated with new text. On each new label created, would an "onStart" be apropos? And ... how would I populate the box? I've built dynamic text boxes that are stacked upon each other and when a new label reached, the old text box is alpha-faded out & the new is alpha-faded in. That seems wasteful and is certainly inelegant. My SWF is large, at 51 labels and with unrelated animation and content, but I've trimmed it down to 4 labels in the code below. Any help will be appreciated. import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; mc_ball.x = P1.x; mc_ball.y = P1.y; mc_map_uk.alpha = 0; var line:Shape = new Shape(); addChild(line); // timing variables ///////////////////////////////////////// var timer_tweek:Number = .8; var staticTimer_var:Number = 4; var image_fade_var:Number = .01; var point_bounce_var:Number = 3; ///////////////////////////////////////////////////////////// drawRoute(); function drawRoute () { var tl_drawRoute:TimelineMax = new TimelineMax(); ///////////////////////////////////////////////////////////// // add each line tween and label the insert point // draw using same time for each tween: tl_drawRoute.to(mc_ball, staticTimer_var, {x:P2.x, y:P2.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_1"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P3.x, y:P3.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_2"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P4.x, y:P4.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_3"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P5.x, y:P5.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_4"); ///////////////////////////////////////////////////////////// line.graphics.clear(); line.graphics.lineStyle(3, 0xFF0000); line.graphics.moveTo(mc_ball.x, mc_ball.y); ///////////////////////////////////////////////////////////// // insert dot tweens at the appropriate label // each tween has the same duration and will start when it's respective line tween starts tl_drawRoute.insert( TweenMax.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_4"); ///////////////////////////////////////////////////////////// // image fades called at apporpriate label tl_drawRoute.insert( TweenMax.fromTo(I1, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(I2, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(I3, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(I4, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_4"); } function drawLine() { // trace("drawLine called"); } function testComplete () { // trace("test complete"); } Best, Steve
×
×
  • Create New...