Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenlite'.

  • 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

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

  1. I'm trying to make a simple cube made from 6 divs for the faces and a div to contain it. Seems to work ok at first, but when I apply a tween to the container div it flattens the contents rather than applying transforms to the faces individually. It's hard to explain but you can see what's going on in the codepen here: http://codepen.io/insomniagfx/pen/PqWPRZ/ Is this approach viable, or do I need to rotate all six sides independently to get the effect I'm going for?
  2. I have relatively big SVG that I'm animating with TweenLite - drawSVG. The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second. I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy. I'm looking for a way to make it smoother without editing SVG itself. I'm using the following code to animate it: jQuery(document).ready(function($){ TweenLite.set(".style0", {visibility:"visible"}); var tl = new TimelineLite(); tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1"); TweenLite.render(); });
  3. I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel
  4. I'm trying to get the target to tween/animate to a position relative to the viewport or body (or parent element), rather than relative to the element itself. How can I do this? When I run the following code, it Tweens the element (target) to a position relative to its own starting position. TweenLite.to(target, 0.5, { top: '200px', left: '200px'})
  5. Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
  6. Hi, I am now testing my apps on 4k displays as these become more common. Using TweenLite: I am having an issue with the performance of a tween that occurs only when very high res displays are used. I am testing on 2560x1600 with the object in question spanning 2500px wide and 500px height, running on a core i7 high spec machine. The tween is simply a 0.5 second tween to alpha 0 and back again. The fade out is clearly running at around 4 to 6 frames per second. The object that is causing the performanc issue is a wood effect complex vector (as attached). With this layer removed from the animated object performance is perfect. I tried making the vector more simple and using optimise, with some very small improvement but nothng significant. In fact I tried making the vector 6X more complex and it was a little slower but not 6x as much. Anyone any ideas on how to improve this. Thanks Complex_vector.zip
  7. I've just started using AS & TweenLite / TweenMax. But I can't seem to get a blurFilter to apply. I have done this so far, package { //Import what I need to import com.greensock.TweenLite; import com.greensock.easing.Linear; import com.greensock.plugins.BlurFilterPlugin; import com.greensock.plugins.ColorTransformPlugin; import com.greensock.plugins.TweenPlugin; import org.flixel.FlxG; import org.flixel.FlxState; import org.flixel.plugin.photonstorm.FlxSpecialFX; TweenPlugin.activate([blurFilterPlugin]); public class ScreenTwo extends FlxState { private var Bwain:Brain; private var bg1:BackgroundOne; //Active plugins TweenPlugin.activate([blurFilterPlugin, ColorTransformPlugin]); override public function create():void { super.create(); Bwain = new Brain(0,0); bg1 = new BackgroundOne(0,0); FlxG.addPlugin(new FlxSpecialFX); //Here I try to tween it. TweenLite.to(bg1, 3, {blurFilter:{blurX:10, blurY:10}}); TweenLite.to(Bwain, 10,{x:-120, ease:Linear.ease}); add(bg1); add(Bwain); makeRed(); } private function makeRed():void { //TweenMax.to(Bwain,4, {ColorMatrixFilter:{colo } } } When I run it, the Linear tween works fine, but during the duration of the blur tween the program looks frozen and resumes after 3 second.
  8. I can create a TweenLite like this: var tl = TweenLite.from( '.box', 1, {opacity:0} ); At this point it automatically plays. How can I get it to not auto-play, but instead "manually" start it at a later time with: tl.play();
  9. Hi, I am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ Here I see the play, pause reverse all the stuffs for tweenlite. So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite. When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. So, kindly help me, whether am doing the right thing or not.
  10. Hey guys, So i have this element that I want to animate x=50, then when thats done animate x=100. I cant seem to make it work or figure out how people do it. It seems to work if I animate the target, then animate another target, then animate the original target again. In the codepen im animating the .menu-button
  11. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  12. Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated
  13. Be possible to control from most to least the brightness and contrast a movie with TweenLite using two buttons?
  14. Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?
  15. Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }
  16. Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much
  17. Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.
  18. mlovett

    Ease on Play

    Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett
  19. Hi, I'm new in gsap and need a little help. I have an animation that triggers on each scroll event and sometimes the animation stutters badly. The fps meter shows values from 9 to 55. (I'm trying to animate divs with png background). Rough version of my code: var scrollPosition = 0, lastScrollTop = 0; $(window).scroll(function(){ scrollPosition = $myWindow.scrollTop(); if (scrollPosition > lastScrollTop){ // --- scroll down TweenLite.to($('.boxes'), 2.5, {top: "+=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } else { // --- scroll up TweenLite.to($('.boxes'), 2.5, {top: "-=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } // --- update last scroll lastScrollTop = scrollPosition; }); Is there something that I could optimize, must I use timelines etc.? Any help would be greatly appreciated p.s. sorry for my bad English
  20. Hi, Working on some banner ads, where filesize is important, I was wondering if it is possible to use the yoyo effect without loading TweenMax.min.js . At the moment it's the only effect I'm using TweenMax for, but it's an extra 76 kb if I'm not mistaking. I included a codepen demo where I built the yoyo effect as a TweenLite sequence, but it's not very beautiful to copy paste this every time I want a similar effect. Been looking around at the forum, but can't really find a solution (Using the CDN links is of course an option, I know). Thanks in advance, Wouter
  21. Hi there, I have a feeling this is a really stupid question simply because it feels like it should be so easy, yet I can't find a solution online that will work for me. I have a Sprite that I want to tween the rotation using the "shortRotation" plugin. Everything is generally ok, except that: 1) The rotation is occurring around the top left point of the Sprite rather than the centre. I had read that the default transformation point is the centre, but then I saw a post that suggested this may have changed? 2) I've tried specifying the transformOrigin using two methods I found online - neither of which work. This is my basic call: [public var _secondHand:Sprite = new Sprite();] TweenLite.to( _secondHand, 1, {shortRotation:{rotation: _secondsDeg } } ); I read that one could specify the origin as a parameter: TweenLite.to( _secondHand, 1, {shortRotation:{ rotation: _secondsDeg }, transformOrigin:"50% 50%" }); This results in a runtime error as transformOrigin isn't a property of Sprite... Should I not be using Sprite?? I also read that you can set a property value on an object using TweenLite.set( ... ). I tried this too but it also fails at runtime. I've also seen references to another plugin "transformAroundCenter" (and AroundPoint) but I don't have Club membership so I don't have these plugins. Have these plugins replaced support for transformOrigin? Please help! I really like TweenLite so I'm hopeful I can get this to work! Cheers, Oliver
  22. I have a point drawn in an canvas (html5). Then I want this point to animate in a circular path. I saw an example using time differences to set the x and y variables, in respect to time. Some of the variables and formulas used are quite vague, I have forgotten my physics, d*mn. But I have researched quite a bit on circular motion, so I can understand some of it. Here is my [codepen][1] on how it was done. Basically here are the parts I have identified so far: this.orbit = 100; // this is the radius of the circular orbit this.radius = 5; // orbiting object's radius this.velocity = 50; // yeah velocity but without direction, should be speed (agree?) var angle = 0; starting angle of the point in the orbit inside the canvas's quadrant, set `x` and `y` coordinates with respect to the coordinates of the canvas first get the center of the canvas by dividing the width and the height by 2 then adding to the product of the orbit's radius and the position of `x` and `y` with respect to the initial position in the orbit(angle), and since Math trigonometric functions uses radians, we should multiply it to the quotient of `PI` and `180`. this.x = _width / 2 + this.orbit * Math.cos(angle * Math.PI / 180) this.y = _height / 2 + this.orbit * Math.sin(angle * Math.PI / 180) by doing the above, we now get the initial position of x and y in the orbit. What is quite trivial to me are the next variables `_dx` and `_dy` and also the `_magnitude`. var _dx = this.x - _width / 2; var _dy = this.y - _height / 2; var _magnitude = Math.sqrt( _dx * _dx + _dy * _dy); Here is how the point is animated: Point.prototype.update = function(dt) { var dps = this.orbit * 2 * Math.PI / this.velocity; var angle = (360 / dps) * dt / 1000 * -1; this.vx = this.vx * Math.cos(angle * Math.PI / 180) - this.vy*Math.sin(angle * Math.PI / 180); this.vy = this.vx * Math.sin(angle * Math.PI / 180) + this.vy*Math.cos(angle * Math.PI / 180); var _magnitude = Math.sqrt( this.vx * this.vx + this.vy * this.vy); this.vx = this.vx / _magnitude * this.velocity; this.vy = this.vy / _magnitude * this.velocity; this.x += this.vx * dt / 1000; this.y += this.vy * dt / 1000; } And here is the execution of the script: function animate () { dt = new Date() - ldt; if (dt < 500) { // context.clearRect(0, 0, canvas.width, canvas.height); point.update(dt); point.draw(context); }; ldt = new Date(); setTimeout(function() { window.requestAnimationFrame(animate); }, 1000 / 30)} dt = new Date(); animate(); } With the unclear variables, like `_dx _dy _magnitude` I cannot understand how it works and how the computation of variables, `vx vy` which I assume the velocity with respect to x and y respectively. I wanted to use greensock tweenlite for the animation and it is done like so: Point.prototype.update = function(p){ var _to = { x: , // change the value of x y: , // change the value of y ease: Cubic.easeInOut, onComplete: function () { this.update(p) } } TweenLite.to(point, 2, _to) } As you can see the first parameter is the current object (point), then the second parameter is the time, I assume this to be the velocity and the the third parameter is the change in the object's properties, x and y. During the time of the writing I realized what are the variables `_dx` and `_dy`, they are the differences or change in the position of x and y
  23. Hello, I'm sorry if this question is being discussed already, i couldn't find anything in the documentation or the forum. Basically i have a button with which I'm triggering a background-position animation on a DOM element with lets say 240px. Everything is working fine there. The problem is if i click the trigger button while the animation is active, its start again and the background is moved 240+ pxls, depends how quickly I have clicked the second time. Is it possible to ignore clicks on the trigger while animation is running ? I've tried the following with no luck: var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut}); if(tl.isActive()){ return false; } Thanks in advance! M. Gorchev
  24. I'm trying to create a line of text that slowly fades into view from left to right (or top to bottom, whatever). I see the very simple process of fading the entire text field in or out, but is there a way to fade vertically or horizontally? Thanks!
×