Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timelinemax'.

  • 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'm new to gsap and playing around with grouping animations. I'm struggeling with following: var mtl = new TimelineLite(); function hufPerspective () { var sentence = Huf.html().split(""); var tl = new TimelineMax({repeat:1, repeatDelay:2, yoyo:true}); TweenLite.set(Huf, {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}}); Huf.html(""); $.each(sentence, function(index, val) { if(val === " ") { val = " "; } var letter = $("<span/>", {id : "txt" + index}).html(val).appendTo(Huf); tl.to(letter, 1, {autoAlpha:1, ease:Back
  2. Hi guys, I've been trying to work this out but just can't get my head around it. The following needs to happen: - 3 Images - 4 Positions (with 4 values. X, Y, width and height) - Click on the next button - Images rotate. 1 goes to position 2, 2 to 3, 3 to 4, and 4 to 1. My solution (that doesn't work) was as followed: var tlTelefoon = new TimelineMax(); var positions:Array = new Array (new Array(267,136,386,520), new Array(236,138,339,456), new Array(204,139,255,343), new Array(420,134,377,540)); var currentPhone:Number = 1; var phone = new Array("to
  3. Hello, UPDATE : I found this answer http://forums.greensock.com/topic/7694-tweento-duration/ that works well. Sorry for the duplicate question. I created a timeline with labels and tweens. It's basically 4 slides (100% height) that move up or down. I have a top menu and when I click on an item I want to move the playhead to the right label so i'm using the myTimeline.tweenTo('labelName') which is working fine. But let's say I'm on my first label and I want to fast forward to the last one when I click on the last menu item. When I do a tweenTo('lastLabel'), it takes a long t
  4. hi, i have one doubt regarding adding animation array in timelinemax. Is it efficient if i add array of animation in timelinemax or i add one animation at a time? ..What will it make difference?
  5. Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.
  6. Hey all, Relatively fresh in the web-dev world, really enjoying using greensock! I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case). The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected. I've got it working, although the images I have are slightly large and un-optimized at the moment. I've create
  7. Is there any way for all the timeline/tweens to reset back to starting position all at once and pause them there and wait until triggered to play/resume again except the currently triggered timeline? for example, I have 2 slides which identifies element if it was currently on the viewport and then fires the tween sequence inside a timelineMax. (don't mind the viewport identification as it was already done) I tried TweenMax.killAll(false, true, false); but what it did was, it pauses all the delayed and remaining tweens which leaves the current state of element. What I want is since the
  8. It appears that once you change CSS properties that effect page layout, the effected elements can no longer be animated using GSAP. I have an example here that is a simplified version of my project. Click on any of the colored rectangles to see what I'm describing. The first time you click, it transforms and scrolls to simulate zooming in on a rect. But since doing so also changes layout CSS properties - it breaks as soon as you start animating again in a peculiar way. You won't be able to tell from the example why it is necessary to change layout properties, but it is something I need
  9. I have an animation with 10 chapter with label each one, when finish all the animation y have button to jump in each chapter with "seek()", for example i jump from chapter 1 to 5 with seek('chapter_5'), but when i do it, the animation jump to chapter 5 but show also the chapter 1, chapter 2 3 and 4, So, how can i jump?? to chapter 5 and show only the chapter 5 ? var tl_EscenasControl = new TimelineMax({}); tl_EscenasControl.add('escena_1',0) tl_EscenasControl.add(control_escena1(),'escena_1') tl_EscenasControl.add('escena_2','+='+delayEntreEscenas) tl_EscenasControl.add(control_escena2(),'e
  10. Hello All, I am doing animation like this http://jsfiddle.net/g2kxL/. in phonegap 3.0 android. When my animation run for first time, animation is not smoother. and the quality of animation is almost 50% then 2nd time. After complete first loop completes it continuesly works fine. Any help would greatly appreciated.
  11. I'm moving this into a new topic from a reply in another topic. I've created a codepen: http://cdpn.io/tlmGg The issue is that (starting from fresh page), clicking "+" to play the timeline one or more times and then clicking "-" to reverse it doesn't reverse the timeline immediately. The onReverseComplete is called right away without anything being done. You have to press "-" again causes it to do the desired thing. After doing that a few times (or once), clicking the opposite direction ("+") again triggers the onComplete without actually playing. Any ideas as to why it remains paused
  12. Hi, I am trying to animate div with timeline max. I am following this procedure : - loop for total div elements with jquery's each - create tween for each div element with tweenmax - on complete of tweenmax reverse it - push tweenmax to tweens_array - add tweens_array to timeline max - on complete of timelinemax reverse it Problem : div is not tweening reverse it will come directly to origional position. here is this source code for refrence : CSS : div,body{ margin: 0; padding: 0; } .container{ position: absolute;
  13. Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use Updat
  14. I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, a
  15. I'd like to pause my timeline at a particular point. How do I do this? This is the code I have so far. http://hastebin.com/soqelufado.pl The code repeats, but I'd like to pause it before it repeats. I figure that I should do this my providing a parameter to the final tween, which currently looks like this: . to( $(els).eq(2), 2, { left: 0, delay : 3 } ) So, how do I make this tween pause after it runs? Also, if I'm right, and there is documentation for this. where is it? Thanks.
  16. I've been struggling with my first challenge: making a seamlessly cycling slideshow with timelinemax. So far, no matter what I do, after the animation cycles for the first time, I get an empty pane until the first animation in the chain completes. I've tried a number of ways to prevent this, but to no avail. This is what I have so far: My viewpane is 960px wide. It is initially occupied by the first slide, while the other slides are outside the right edge of the pane. All slides have a starting z-index of 100. var tl = new TimelineMax({repeat : -1}) ; tl.to( slides
  17. I'm in the process of creating a functions to create a slideshow. my variable 'slides' is a jquery object, containing dom elements that will be my slides. I pass 'slides[1] to my timeline function. I'd like to use the onComplete callback to increment the value of currentSlide, and then repeat the animation. However, I discovered that I couldnt' access the variable currentSlide from the callback. Doing a little poking around, I found that I couldn't access any objects from the callback. Is this expected behaviour? Or am I doing something wrong? My code: var slides =
  18. I've been playing time with tweenmax. I pretty soon realized that I couldn't get the effect that I wanted without using timelinemax. I'm loading tweenmax into my browser. But I cant do anything with it. when I start do anything with tl.to(...) chrome's console give me the error "uncaught exception: cannot call method 'to' of undefined. Console references me to the line where I use 'tl,to(). The sample code I'm working with can be seen at hastebin.com/midacafegu.vbs
  19. Hello All, I am using a repeater to display items from a database. What I would like to do is: 1.slide in first item 2.add transformation for second item 3. add a different transformation to the third item After three items have been displayed I want to fade out first three and display next three items. and I want to repeat this process in a loop.. Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax(); $('.tick').each(function
  20. Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scal
  21. This code works fine on the first loop, and not on the second: var tl = new TimelineMax({repeat:-1}) tl.fromTo(tx4,1,{skewX:-40, x:b.width},{skewX:0, x:0, ease:Linear.easeNone},'-=0.5') .to(tx4,0.5,{transformOrigin:'center bottom', skewX:70, scaleY:1.5, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:-45, scaleY:1.25, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:0, scaleY:1, ease:Back.easeOut},'-=0.1') How can I fix this? <rant> No matter how many times I run into this problem, it never seems to sink in. Looping timelines are so unintuitive in gsap that I could pull my h
  22. I have two timelines.. tl1, tl2 for demonstration purposes. tl1 starts when the dom is ready. tl2 starts via button click. There is another button that reverses everything to where tl1 starts. The problem I have is that if the button that starts tl2 is clicked before tl1 is finished, then someone clicks the button that reverses the timelines to the start of tl1, then tl1 is reversed to the point where the interruption happened. How can I tell the button that reverses everything back to tl1 to go all the way back to zero?
  23. First, I want to be clear that I know that GS is highly optimized, and that in no way do I mean to imply there's any problem with the GS speed. I've never had one. I've been working on a large sectional project for 3 months where games are being run along with videos inside an external player. One of those games -- using rudimentary Flash 3D, etc and using a touchscreen for touch detection -- runs slower than the client wants. The issue is, of course, with the videos and the external player, and with the multitude of external videos being played. That having been said, is there a
  24. I have timelines in my site which have animations added to them in sequence. The first time i play a particular timeline it plays fine, any time after that it skips whatever is in the first .add() or it just skips the first label .. I am not even sure how to describe this. One example is that I have an abstract that defines a sitesection (SectionViewBase). on the transitionin function it creates a timeline ads the global transition for each section and then there is a transitionInComplete function that is overwrote by the childclass that subclasses SectionViewBase. the override will return a
  25. Hello, I'm using the TimelineMax ans it works great. But I have a problem with something. I want to use a delayedCall function. In this function, I have other tweenMax. Something like this : var tl:TimelineMax = new TimelineMax(); tl.insert(TweenMax.to(camion, 8,{x:700, ease:Linear.easeNone})); tl.insert(TweenMax.to(nuage, 20,{x:"-100", ease:Linear.easeNone})); tl.insert(TweenMax.delayedCall(3,enleverTexte)); // function enleverTexte() { TweenMax.to(txt1, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn}); TweenMax.to(txt2, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn, delay:0.2}); } Now, I want t
×