Jump to content

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

Search the Community

Showing results for tags 'nested'.

  • 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



Found 23 results

  1. Hello Club Green Sock! I was reading about the common Scroll Trigger mistakes looking for a solution to this question. I think may be going about this the wrong way, but... I have a timeline let hardwareTimeLine = gsap.timeline({ scrollTrigger: { trigger: ".centering-container", scrub: true, pin: true, pinSpacing: true, start: "top", end: "150%" } }); hardwareTimeLine .from(".hero-header", {}) .fromTo(".animated-header", {autoAlpha: 1, top: "29%"},
  2. Hi team, I have a problem with my code that I can't solve. So what I have is a master timeline that have 3 nested timelines: getSpinTimeline(), getRotateTimeline(), getPinTimeline() var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); mtl.timeScale(2.3); After the animation has ended, I hit on a button I would like to reverse() the animation. It works fine if I do mtl.reverse(); But what I am trying to achieve here is to remove getPinTimeline() and reverse only getRotateTimeline() and getSpinTimeline(). I tried th
  3. Hello, Is there a way to run onComplete function of all nested timelines after main timeline finished playing? I have a two areas at page - one is carousel list (left <- center/current -> right) and second is menu (div with buttons) which slide to left or right. I defined a drag event which unites two effects - carousel slide and menu slide. main timeline is controlled with .progress(X, true) function and after reaching 80% limit and dropping (mouseup), state changes and both effects need to be reset in their onComplete. The problem is that duration di
  4. Hello, In my master timeline i would like to play child timelines not from the beginning, from the half for instance. I've succeded in using the tweenFromTo() function. But the problem is that i have to set the 2 values in seconds, and let's imagine if later i change the duration values in my timelines i will have to make a calculation again to find the 2 values and then change them. Not a convenient method. Do you know if a better solution exists ? Thanks a lot.
  5. Hi! How would one go about targeting a mask for animation that is nested inside a movieclip. .from(this.movieclip.mask, 1, {x:"+=100"},"+=1") does not work for me. Thank You Salakala
  6. I created a master timeline so my 6 timelines animate one after the other when the page is loaded. I would like each separate timeline to animate separately on mouse enter. I can manage to do either one of the above but not both. I've got to achieve this using setTimeout function to animate on load. But I would prefer staying with GSAP for this. How can I achieve this. Please note that I am very new at this!
  7. I have an app where SVGs can be dropped onto the stage and animated in various ways to build a complete animation. I'll want to give the user ability to chain together Tweens on each SVG and play them all together. There will, of course, be a main Timeline. My thought is that for each SVG that gets dropped onto the stage, create a new NestedTimeline class that would contain the Timeline, the element to be tweened on that timeline and then push tweens into it. I would add each of those Timelines to the main one. When the play button is clicked, the main timeline would play. I'm just tr
  8. I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to
  9. Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL f
  10. Hi team, If I have a master timeline that contains 3 smaller timelines. Let's say if I want to change the start time of getPinTimeline so that it overlaps on the timeline of getRotateTimeline. How can I do that? var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); Cheers, Venn.
  11. I'm trying to pause nested timeline: prezStartTimeline.call (buttonsHomeOff) .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}}) .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .add (RAOTimeline); RAOTimeline.addLabel ("slide_01") .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03],
  12. Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
  13. sym.getComposition().getStage().getSymbol('mc1').getSymbol('element'). Above is the button code (btn) I have to reach the symbol 'element', nested in 'mc1' on the stage. For this example I want to tween 'element' with this code: TweenMax.to(element, 3, {alpha:0.5}); in the future I want to apply a timeline to it. (is this possible? Not quite sure) tl.to(element, 1, {width:"50%"}); My problem is that I can't quite point to it, or figure out how to do this... I have managed to work out how to add external images, video, iFrames and apply text to nested symbols via buttons but th
  14. Is it possible to ignore all events on a drag container ( type = scroll ) when I drag a nested element ( type = x,y )? When I use dragContainer[0].disable(); the container resets the position to 0,0. I tried to disable interaction with dragContainer during the onDrag event from a nested element, but no success. edit: I've added a pen. So when you drag the yellow container around you will see some images. When I drag those images (nested draggables) you will see that the container is moving as well. When you uncomment #111 & #116 you will see that the disable/enable is making trou
  15. I'm having a bit of trouble getting a set of chained timelines to pause as they complete. I want to have timelines to control a couple of objects on screen and then pause until the user hits the forward button to advance but I can't seem to get the pause to kick in. It just keeps running through both timelines. I'm guessing I'm using the wrong approach. Would love some help on this. $('.trigger-forward').click(function() { scene.play(); }); $('.trigger-backward').click(function() { scene.reverse(); }); var moment_1 = new TimelineMax({pause:true}); var moment_2 = new TimelineMax({
  16. Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax
  17. Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my imple
  18. hi, I have objects with different timelines, I create them dinamically from DOM animation containers id and cache the timelines so that I can use them later: var subBlock=function(blockId){ this.blockId=blockId; this.showTl=new TimelineMax({paused:true,smoothChildTiming:true, onComplete:thisInstance.shownCallback,onCompleteScope:thisInstance}); this.hideTl=new TimelineMax({paused:true,smoothChildTiming:true ,onComplete:thisInstance.hiddenCallback,onCompleteScope:thisInstance}); switch (blockId) { //each element has it's own in and out animations case "blo
  19. The ThrowProps Rotation demo code produces some erratic behaviour although it only happens when the dial is within a movie clip ie. nested movie clips. Symptoms are that the dial; 1. lags behind the mouse pointer and 2. rotates in the correct direction, but only from 90 to 270 degrees, it then rotates in the opposite direction. Is there any way to tweak the code to correct these problems?
  20. Hello! I am trying to build a timeline that is composed of nested timelines. I am finding that the when I nest the timeline, the yoyo playback(and even the plain repeat) ends up playing the incorrect values and the css matrix gets set incorrectly. It works fine if I add the Tween like this: tl.add ( TweenLite.fromTo( ... )) but if I create a new timeline and add that, I get the error. tl2 = new TimelineLite(); tl2.add ( TweenLite.fromTo( ... )); tl.add( tl2 ) I have an example here: http://jsfiddle.net/7h5ED/2/ I left it in the broken state, but if you change the s
  21. I know this is a rookie question but does someone know where to find information or knows how to setup up a basic nested TimelineMax? Any help would be appreciated. Thanks.
  22. Hi, I am having trouble getting onUpdate event to fire in a TimelineMax that I have nested inside of another TimelineMax. Basically i have a "master" timeline, and a bunch of different "section" timelines. The master timeline has its own onUpdate , but I would like the onUpdate for each of the different sections to call a different function. for example... var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({paused:true, onUpdate:sec1Update}); var sec2 = new TimelineMax({paused:true, onUpdate:sec2Update}); master.add([sec1, sec2], "+
  23. The following animated perfectly. All is well. But when I go to REVERSE() the timeline, the ball fades out, but never back in, and continues back to original starting spot at opacity = 0. Why is this? Thanks -Thomas function fadeIn(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:1}, ease:Linear.easeNone})); return tl; } function fadeOut(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:0}, ease:Linear.easeNone})); return tl; } var ball = document.getElementById('ball2'); var tl