Jump to content
GreenSock

Search the Community

Showing results for tags 'tweenmax'.

  • 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 would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads
  2. $(document).on("mouseenter", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:new_footer_number_fontSize+"px"}, textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00", ease:Power4.easeOut }); }); $(document).on("mouseleave", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:old_footer_number_fontSize+"px"}, textShadow:"0px 0px 0px rgba(0, 0, 0, 0)", color:"#d6d6d6", ease:Power4.easeOut }); }); am i doing something wrong?
  3. I'm repeatedly animating an SVG path with TweenMax.to: function wink() { TweenMax.to($righthand, 0.4, { x: 60, y: -60, rotation: -120, ease: Power1.easeInOut, transformOrigin: 'left bottom' }); TweenMax.to($righthand, 0.15, { rotation: -90, yoyo: true, ease: Power1.easeInOut, repeat: 5, delay: 0.4, transformOrigin: 'left top' }); TweenMax.to($righthand, 0.4, { x: 0, y: 0, rotation: 0, delay: 1.25, ease: Power1.easeInOut, transformOrigin: 'left bottom', onComplete: function() { $righthand.css('transform', ''); setTimeout(wink, 5000 + Math.random() * 10000); } }); } even resetting the transform property in the onComplete function. As long as the window is open, everything is fine. Now, using the latest Chrome on Mac OS X, if you keep the animation running in a background tab for a few minutes, the path slowly starts creeping away - see the attached screenshot, the hand of the animal has somehow transformed into an obscene dongus. While funny, I'd love to know if there is a fix for this. Thank you!
  4. Greetings! I have my first TweenMax doing everything i need, (including interaction with externals controls/buttons) but I'm drawing a blank as how to prevent it from 'autoplay' My relevant 1liner: var tl = TweenMax.to(point, currentSpeed, {css: { left: "95%"}, repeat:repeat, yoyo:true, repeatDelay:0, ease:Linear.easeNone}); ... so for example my 'pause' button works fine: $('#pause').click( function(){tl.pause();}); ... how do I make it start only when I press my $('#start') button? I figure I missed something simple, hence my apologies and thanks in advance.
  5. Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.
  6. in following tween I need to use a var instead of number in transform origin area. I did change the number with a variable but it's not working. TweenMax.to("#gallery", 1,{rotationY:GrotY,opacity:0, transformOrigin:"50% 50% zValue",ease:Power4.easeOut}); as you can see same job works for rotationY value.
  7. I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated. http://codepen.io/misterjworth/pen/EjGrGL?editors=001
  8. Hi everybody, I'm trying to animate an SVG (that I didn't create) for client project. It works well in Chrome and even Internet Explorer (9-11), however, I'm running into trouble with Firefox. The y positioning of the elements is completely incorrect, some parts move up instead of down and parts that should visually "stick" together end up shifted. http://codepen.io/anon/pen/zGMKPN Interestingly, I found out that if I use "yPercent:" instead of "y:" and adjust the values accordingly, the animation works as intended throughout all browsers. Take a look at this modified codepen: http://codepen.io/anon/pen/xGQEXr I don't feel comfortable using yPercent. On the one hand, it's not "semantically" correct in my view, because I actually don't need and don't want to rely on the elements' heights for just moving them around. And on the other hand, if I want to move two elements around that visually represent the back and front side of one single object, I have to find the correct percentage values for each of them, which doubles my work. (I should add that I will have to animate several similiar SVGs for the project.) I'm aware of the fact that the SVG could be cleaner (e.g. not using <use>, the various transforms and the viewBox attributes on the symbols...), but I want to avoid having to clean up and effectively rebuild every single SVG file. And apart from that, I would really like to know what causes these browser inconsistencies that GSAP isn't able to compensate and would be glad if anyone could come up with a way to fix it. Thanks in advance for any help Constantin
  9. Hello Respectful GSAP community, I am trying to scale up a Fixed Action Button to achieve a special effect of Material Design but I have some frustrating problems which I do not know why these happen, first of all the scale animation that I am trying to achieve is very laggy on desktop Firefox (Latest version) and Mobile browsers (I have tried on iOS 8 safari and iOS chrome) as you can see in my Codepen example, Second, How could I make the first three steps of my Timeline to happen at the same time and then the forth step? Because Now steps other than the first one wait until the scale animation is finished and then start to act and I don't know why! I have just simulated the Scale part because only that is performing laggy! Regards and thanks in advance.
  10. Hi, I have no idea why this is not working on my desktop or on my web server but works in Code Pen. I have the latest cdn and the js and css files all link fine. http://codepen.io/voguewebservices/pen/NqOdGY Thanks Allan
  11. I'm trying to get an animation to use different property values every time it plays. I've put the values into variables and everything works fine using the default values the first time, but I can't figure out how to get the animation to read the new values that are created when you click a button. var jumpHeight = 100; var jumpTime = 1; var boxcolor = "#00ff00"; var jumpBox = new TweenMax("#redbox", jumpTime, {y:(-jumpHeight), backgroundColor:boxcolor, ease: Power1.easeOut, repeat:1, yoyo:true}); //called when you click a button function rePlay(){ jumpHeight = jumpHeight+24; jumpTime = jumpTime-0.1; boxcolor = "#0000ff"; jumpBox.restart(); } Is there a simple way to do this that I'm missing? This codePen shows a simplified version of what I'm trying to do. http://codepen.io/misterjworth/pen/bdjoLv (The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)
  12. Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example. I hope I could describe my problem well. Thanks in advance.
  13. I load a swf file in my application, and the swf have some tweens (TweenMax). The problem happens when I play and stop the object, like this: var swfloader:SWFLoader = SWFLoaderObject; //SWFLoaderObject is my swf loaded var tweens:Array = tweenMaxClass.getAllTweens(); for each(var tween:* in tweens) { tween.seek(0); //0 is example } swfloader.rawContent.gotoAndPlay(0); //0 is example The objects are out of sync, and can not correctly resume animations, either by stress processor or other problem.
  14. These are the 3 PNGS that have been provided below. I have attached the animation to be achieved with the above given images. Is it possible to do this with TweenMax or any other library from GreenSock as I have been asked to achieve this using greensock? Tired thinking of a solution for the same. I would be happy if anyone can provide a direction. sample animation.zip
  15. Hi GSAP authors! I'm need help, i maked tweening engine, Animo.js (github.com/dalisoft/animo.js - 2 branch (v2 and master v1). I Highly optimized the performance, but i dont know why i can't tween smooth than GSAP. I have question, why TweenMax size too large??
  16. rgfx

    Animating Timescale

    Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
  17. Hi! I'm writing a plugin for a project I'm working on and I'm running into an issue where my plugin's init method is called twice when used in conjunction with TweenMax.from(). Is this by design or am I making a mistake somewhere? Consistently, the sequence of calls is init(), set(1), set(0), init(). Any insight you could give me on this behavior would be greatly appreciated. Thanks!
  18. Hi all! Is it possible to disable animations in IE8? Basically, I've got a site with a ton of animations and in IE8 it's really struggling and the site will be much better off if I disable animations. I still need the results of the animations, just no tweening. Does that make sense? Cheers, Mike
  19. this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?
  20. Please Help Guide on this issue. Thanks in advance to those that pitch in Here's an example demo (still private) I'm creating to show how Draggable can be used to create an off canvas menu. http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94 A couple issues I'm running into: 1. The red bg is to show the target region. I want the menu to allow drag actions to open the menu when a user's finger drags over the top of the document (not just a small portion of a region). The menu also hides completely when it's closed. The previous example linked in my demo from Carl's original pen had the menu showing 15 pixels when closed. Need some guidance on how to improve the current demo I'm building. 2. Links in the main document body are not clickable and I think I'm missing the explanation in the docs. Maybe some direction how to make these elements clickable so the menu swipe region does not negate those clickable items.
  21. Forgot to clarify in title -- been using TweenMax Hi Guys If you take a look at my codepen, you can see there are multiple 'dashes' animating on the left side of the screen. I have been slowly stripping down this codepen ("GSAP Bezier: Cubic"). But these dashes are added as part of the bezier animation, and I'd like to add them without that... My goal is add multiple 'dashes' on page load, without delay. And add these at specific positions, without motion. Breaking down the task as I can understand it: Load the first SVG all objects are based on, as a variable Multiples of the SVG variable Add 10x more of that variable instantaneously Place these variables at specific x & y positions in the window Looping fade animation (currently applies to all not individual) Stretch goal! Add a nice fade in / fade out on all of it when you land / leave the page. 2.1 & 2.2 is where I feel stuck. Pointers in the right direction? I think one of my biggest issues is that I don't know the correct vocabulary to use while searching... Ultimately, I'd like to get the dashes spaced evenly on the x-axis, and randomly within a range on the y-axis, but animate a fade. That specific Math function is something I think I can work out later. Full disclosure -- I'm totally new to all of this (both GSAP and JS), so I'm in over my head a bit. But trying to get there by doing something challenging! Also apologies for the junk list of links at the end of the codepen JS section, it's the easiest place for me to stash links while I'm tinkering. Thanks!!
  22. Hi there, I am trying to populate a space with Lights at different sizes, blur amounts and alphas. I think I have acheived this. I want the final effect to be that the lights flash and use the random alpha amounts to do so. I hope this explains what I am after. Not sure if this is a Greensock question and sorry if it isn't. And i'm not sure if the answer lies in auto alpha, yoyo:true, repeat:-1 ??? import com.greensock.TweenMax; import com.greensock.easing.*; import com.greensock.plugins.AutoAlphaPlugin; import flash.filters.BlurFilter; flashingLights = function () { TheWidth = 300; // The Width of effect area -> in pixels Object(this).bg._width = this.TheWidth TheHeight = 250; // The height of effect area -> in pixels Object(this).bg._height = this.TheHeight maxLightsize = 60; // Scaling the cell NumOfCells = 70; // Quantity of Cells on the stage for (i=0; i < NumOfCells; i++) { // by using the 'for' looping sequence TheCell = attachMovie("Light_Cell", "Light_Cell"+i, i); // attaching the 'Light_Cell' from the library (Linkage) TheCell._alpha = 10+Math.random()*60; // creating random alpha value RandomSet = 4*Math.random()*4; // Create a random set for amount of blur TheBlurEffect = new BlurFilter (RandomSet,RandomSet,3); // Create variable with the filter setting (xBlur, yBlur, quality) TheCell.filters = [TheBlurEffect] // Applies the filter to the object named myObject TheCell._x = -(TheWidth/2)+Math.random()*(1.5*TheWidth); // positioning the cell on the X axis. TheCell._y = -(TheHeight/2)+Math.random()*(1.5*TheHeight); // positioning the cell on the Y axis. TheCell._xscale = TheCell._yscale = 60 + Math.random()*(maxLightsize*10); // determine the scale of the Cell } TweenMax.to(Light_Cell, 1, {_alpha: 10}); }; flashingLights(); I should add that all of the 'lights' are being placed on the top layer when I run this going over the top of text. Thanks for you help, Phil
  23. Hello, in the following link, i have a sample o collapsing a header height with tweenmax, but in the line 84 a create a variable to get the height of the header, when the header is collapse the console show me 140px, but when is open show me 45. In the big height shows me the small height and viceversa. I use the reverse function to open and close the header, how to get the correct value of the header and not the reverse reference o the height. The link with the example here: http://jsfiddle.net/Gonzalo2683/0veqxee1/ Thaks
  24. Hi all, I am relatively new to Greensock and thought I was going well but have hit a small challenge. I am trying animate the effect of a volume equalizer going up and down. To keep it looking as natural as possible i wanted to vary the heights that the levels rise to. However, when I run the below code it picks the last number that the function generates and then doesn't 'refresh' a new value when the loop repeats. Is there a way to call randomRange everytime the tween repeats? function randomRange(min:Number, max:Number):Number { var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min; return randomNum; } for (var i = 0; i < 1; i++) { var n:Number = randomRange(-27, -72) // Audio levels between these 2 numbers. trace(n); } TweenMax.to(Object(this).main.window1.shade, .2, {_y:n, yoyo:true, repeat:-1, delay:.2}); TweenMax.to(Object(this).main.window2.shade, .2, {_y:n, yoyo:true, repeat:-1, delay:.3}); TweenMax.to(Object(this).main.window3.shade, .2, {_y:n, yoyo:true, repeat:-1, delay:.4}); Thanks for any help that is given, Phil
  25. I am using tweenmax.js for rotating elements , then when I hover currently it is pause the rotation then I need the value of roationY. How can I get the value?
×