Jump to content
GreenSock

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

Search the Community

Showing results for tags 'overlap'.



More search options

  • 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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 8 results

  1. Long time user and a big fan of GSAP Usually I can figure out issues on my own, but this time I'm really stuck. If you refresh the Codepen, you can see that the first animation is the text zooming in slowly, and then zooming out quickly after a brief delay. Now after all the animation is done, I added a tl.restart(); so that it will go back to the start and replays everything, but this doesn't seem to be the case. The text animation is now only appearing instead of the whole zooming in etc. Where did I go wrong??? o.O
  2. I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.
  3. Hi ! It's possible to achieve the scroll effect in this page (this page use scrollmagic and greensock.) http://www.locus-solus.it/en/pouffe_gae_aulenti The elements continue their animation after scroll is stopped. I dont know if I could achieve this with greensock tween settings or the scrollmagic one Thanks!
  4. Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep the elements from starting and ending at the same place in the window with this css property applied?
  5. Hello Again The following works nicely var tl = new TimelineLite(); var $frame1 = document.getElementById('frame1'); var $txt1 = document.getElementById('txt1'); var $txt2 = document.getElementById('txt2'); tl.set($txt2, {opacity:0}) tl.add( TweenLite.to($frame1, 1, {alpha:1}) ); tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) ); tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) ); tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" ); tl.play(); It works: my last timelinelite addition happens with intended overlap. But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work: tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") ); I tried with a few different values just to make sure it is not the numbers. Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite. Thanks again .S, over coffe
  6. I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?
  7. Hi, firstly - many thanks for great GSAP suite. I'm using it for first time and that's really easy to set up. I have just one question about restart the animation/timeline. I have 2 timelines and both animate different element and that's just fine. Animation is good and if you refresh the page everything looks correct. But if you click on Repeat button animation starts in 0.5 seconds so you can't see, that text is not coming to content (to specific position - from 0% to x%) but appears in content (apperas in x%). I noticed that it relates to overlapping ( 4th parametr in method to() ) if I delete the overlapping (mine is "-=0.2") restart is fine but not the move of the text. It arrives from sides and stops (for a few miliseconds) and then continues correctly. But I need smooth move so I used the overlapping but it cause problem with restart... I created a demo on CodePen - http://codepen.io/anon/pen/tDGiz?editors=001 I dont know what to do with it and I would be thankful if you could help me. Thank you. P.S.: Sorry for my english :-\
  8. I have three tweens, each one with a sound effect called on start: //simplified code: TweenMax.to(this, 10, {alpha:1, delay:1, onStart:playSound1}); TweenMax.to(this, 10, {alpha:1, delay:2, onStart:playSound2}); TweenMax.to(this, 10, {alpha:1, delay:3, onStart:playSound3}); function playSound1():void { LoaderMax.getLoader("sound1").playSound(); } function playSound2():void { LoaderMax.getLoader("sound2").playSound(); } function playSound3():void { LoaderMax.getLoader("sound3").playSound(); } I would like the sounds to overlap, but instead, the first sound is cut off by the second, which in turn is cut off by the third. Can I get all three sounds overlapping? Is there a way to access the loaded sound object & play it through a separate channel manually? Thanks
×