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'm trying to figure out why my right column doesn't expand properly when "hide" button is clicked. Both left and right columns are floating left; left column ranges from 20% width to 0 %; right column ranges from 80% width to 100% respectively. Looks great when "show" is clicked, but there seems to be a floating/width issue when "hide" is clicked. This seems like it should be simple, but I can't figure out what I'm doing wrong... Thanks a trillion. BC
  2. add_action( 'wp_enqueue_scripts', 'centric_enqueue_home_scripts' ); /** * Enqueue Scripts */ function centric_enqueue_home_scripts() { wp_enqueue_script( 'homeintro', get_stylesheet_directory_uri() . '/js/homeintro.js', array( 'jquery' ), '1.0.0', true ); } Here's what I have for enqueueing the the javascript. I am using a Genesis theme and have installed the following in the theme setting's wp footer: <!--CDN link for the latest TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
  3. I've been experimenting with TweenLite and TweenMax. And I'm loving them. CSS3 allows for the creation of multiple background images. Is it possible to animate a targeted background image, where more then one background image is defined? Specifically, I might want to tween the 'background-position' property. In my experimentations I've been animating this for a single background image. But it looks like the syntax might not allow for atempts to manipulate the properties of a second background image. Could this be possible?
  4. Hey all, I've got a lovely animation up and running for the site I'm working on, but I would like the mobile animation to run slightly differently. Specifically, I've got a Tween that looks something like this: TweenLite.to(target, 1, { "top": 0 }); Pretty basic stuff. What I'd really like to do is replace "top" with some variable, such as orientation, declared earlier in the code depending on what device and screen size the user is using. That way, I can change the animation slightly based on the users' device/screen size. I'd like to do this in one Tween if possible, because the actual tween itself is much longer, and I love keeping my code as simple and elegant as possible. So that super simple Tween becomes: TweenLite.to(target, 1, { orientation: 0 }); where orientation gets declared some time earlier. Is this possible? I've messed around with declaring it a few different ways, but none of them have worked. Apologies if this is an easy fix that I've been missing, but I've been messing around with this for a while now and haven't found a solution. Thanks in advance!
  5. Hi All, I'm currently having a problem with executing some code correctly. Here's my function that's called to create a fade in effect: function AnimationFadeIn() { var fadeInDivision_1 = document.getElementById('show'); var fadeInDivision_2 = document.getElementById('output'); fader.to([fadeInDivision_1, fadeInDivision_2], 1, {opacity: 1}); } A fade out effect: function AnimationFadeOut() { var fadeInDivision_1 = document.getElementById('show'); var fadeInDivision_2 = document.getElementById('output'); fader.to([fadeInDivision_1, fadeInDivision_2], 1, {opacity: 0}); } Now, my web application uses Ajax for server interaction. So each time the user clicks a button, the process() function is executed: function process() { AnimationFadeOut(); if (xmlHttp.readyState === 4 || xmlHttp.readyState === 0) { htmlText = encodeURIComponent(document.getElementById("htmlFile").value); xmlHttp.open("GET", "ServerExecute.php?text=" + htmlText, true); xmlHttp.onreadystatechange = handleServerResponse; AnimationFadeIn(); xmlHttp.send(null); } else { setTimeout('process()', 1000); } } My problem here is that the if statement executes before the fader tween in AnimationFadeOut() function is complete. Is there any way I can check if fader in AnimationFadeOut() function is completed, before executing the if statement?
  6. Flexbox is the modern way to lay out an interface, however it still needs vendor prefixes. At the moment I'm using: TweenMax.set(element, { display: "-webkit-flex" }); ... which supports Chrome, Safari and iOS, it would be great to have this work for all browsers by display: "flex". Why don't I just do this in CSS you ask - I have a couple of plugins heavily utilizing Greensock (think carousels, tabs, etc.) that I need to be JS only, so defining the essential structural styles in code is necessary. For me flexbox is the best and cleanest way to layout a carousel or sliding tab content (using Draggable). I imagine the infrastructure is there to accommodate this essential CSS property. It would be a great addition to your CSSPlugin.
  7. How to integrate Angular property (.ng-hide-add and ng-hide-remove) in GSAP? Scenario: I have a div say "demo", I have four different partials which will append to "demo" by clicking four different tab. I need to animate "demo". So each time i click a tab partials gets appended to "demo" div. I need to use GSAP for ".demo.ng-hide-add" and ".demo.ng-hide-remove". How can i achieve this in GSAP?
  8. Hi guys, today morning i was reading the "get started page" on the GSAP web site, i was finding it really interesting, then i decided to try it. But as soon as i wrote my code and launched on google chrome, it didn't seem to work at all. Then i started wondering if there were some problems with my browser even because i tried the same code on CODEPEN (http://codepen.io/RyanLeenox/pen/EjWNRg) and it's working perfectly. So my question is, what to i have to do, to run the code on my browser? ps. I'm new here, this is my first post and i really hope this is the right section, these are the right topic tags, if not i'm really sorry about it.
  9. Hi everyone ! Hope you are fine. My question will follow in a few line, but let me introduce my problem with an image : Well, I want to creat a sequence of images. Image 1 has to take image 2 place, image 2 -> image 3, image 3 -> image 4 and image 4 has to take image 1 place. And here is the problem : 4 container that have to be resize. I have no ideas about how to do it. Because it be an infinite sequence with maybe 5s delay between each. Have I to show the risizing and object moving ? But how to make a good transition then. Do I make a shadow on whole images and when the shadow is gone show new establishment ? The only idea I have right now is to pre dev the whole comportment with a time line : img1 -> resize height img2 -> resize width img1 -> move to img2 img4 -> move to img1 and resize img3 -> move to img 4 img2 -> move to img 3 etc And doing it for all possible positions with a repeat (-1). Do you guys have some ideas about ? I thank you in advance.
  10. How can I force each segment of TimelineMax to be TweenMax instead of TweenLite as it seems it is happening now. I have: var tl:TimelineMax = new TimelineMax(); tl.to(mc, 1, {x:100}); if I check this with trace ( tl.getActive(false,true,false)[0]; ) I will get TimelineLite. do I have to do tl.add ( TweenMax.... ) or there is a way to make TweenMax to be default for each addition to TimelineMax if lined with .to, .from, .fromTo ... ?
  11. Hi, I'm not a hard-coding developer so please excuse my lack of professional courtesy ; ) Anyway. I have this Joomla site and something works out bad. Last night the site turned dead. Discovered a lot of files in the cache directory. After turning the cache off and on - the files come back. OK, so I' debugging. RS Firewall showed something like this: components/com_layer_slider/base/includes/slider_markup_init.php Suspicious JS inclusion cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> I look inside the file - OK, there it is. First it was 1.12.2 or so, changed to the latest one. RS still sees this as a suspicious JS inclusion. Unfortunately, I have no time to wait for the slider maker's response as my client is probably up by now (I started 3 hours ago, early in the morning). Hosting loaded my day-before-yesterday backup but this started to happen again. The files which are growing in the cache are like this: 461eba3d86a698b21884bd2d67f164d5-cache-page-61e660625c6877de5807d38fb35f520a.php page-xxxxxxxxxxxxxxx is different but the beginning is the same. Inside: EDIT: This seems to be something normal for cache : / <?php die("Access Denied"); ?>#x#a:3:{s:4:"body";s:709:"<?xml version="1.0" encoding="utf-8"?> <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"><ShortName>Kliniki Ziemlewski</ShortName><Description>Klinika Warszawa | Wrocław | Poznań | Łódź</Description><InputEncoding>UTF-8</InputEncoding><Image type="image/vnd.microsoft.icon" width="16" height="16">http://www.klinikiziemlewski.pl/templates/jsn_time_pro/favicon.ico</Image><Url type="application/opensearchdescription+xml" rel="self" template="http://www.klinikiziemlewski.pl/component/search/?id=115&Itemid=118&format=opensearch"/><Url type="text/html" template="http://www.klinikiziemlewski.pl/index.php?option=com_search&searchword={searchTerms}"/></OpenSearchDescription> ";s:13:"mime_encoding";s:37:"application/opensearchdescription+xml";s:7:"headers";a:1:{i:0;a:2:{s:4:"name";s:3:"P3P";s:5:"value";s:50:"CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"";}}} So now is my question: do you guys think it's something with the actual TweenMax or is it connected with Joomla cache somehow, and therefore it's not the library problem? I hope the layer maker will contact me back soon. Any chances that this library messes up with something about cache of the system? Anyone heard of anything? : ) Or is it coincidence that RS Firewall shows this (TweenMax file) as a possible JS inclusion (wrong word in the topic - sorry : )? Thanks for any hints. Milo
  12. andyr

    fromTo, left, right

    TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0}); The aim is to animate top-left to top-right of browser window. In the above, the 'left' property is still being read in the 'to', so it stays top-left. So I tried overriding 'left' with left: "auto": TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0, left: "auto"}); That sets 'left' back to default, but it doesn't animate from the left: 0 specified in the 'from'. Any ideas? Edit : Although I could do this: {top: 0, left: "100%", xPercent: -100, yPercent: 0});
  13. tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).
  14. Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
  15. Hey there. Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this.
  16. Hi, Thanks for Great plugin. I have about 6 sections in my website home page. 3 sections have parallax effects (I am using scrollmagic for parallax animation). I have given ID's to each sections to scroll to particular section from other page anchor links. My problem is when i am clicking home page sections link from other pages, browser is not scrolling to particular sections. Page scrolls while page is loading but immediately it is scrolling to top of page. This issue is occurred only in firefox. For chrome, safari & IE it is working fine. I am not sure it is problem related to scrollmagic or not. After i am removeing "tweenmax.js" links are working fine. I also can not remove tweenmax.js because i am using some timeline animation in homepage parallax effect. Thanks again.
  17. Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
  18. hi, Can i scale object with transform 2d method.When tries with "scale" parameter it uses matrix 3d.My codes have problem with matrix3d .please help me on this.
  19. 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.
  20. Hi all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0). I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen). Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way? Thanks in advance!
  21. Hello. I am in need of serious help with this problem I'm facing. First off let me tell you what I want to achieve with my code. On click of a button at the top-center of my screen, 4 fishes are to be tweened with bezier movements to simulate 'swimming' through water. They have other functions but this is the part that I need to get working. function tweenFish():void { var numY:Array = new Array; for (var count:Number = 1; count < 5; count++) { numY.push(count+8); } numY.reverse(); trace(tweenArr, round); for (var numX:Number = 0; numX < 4; numX++) { var randomStart:Number = (Math.floor(Math.random() * (460 - 140 + 1)) + 140); _difficulty[numX].y = randomStart; _difficulty[numX].x = -50; if (round == 1) { tweenArr[numX] = TweenMax.to(_difficulty[numX], (numY[numX]/round), {bezier:{curviness:2, autoRotate:true, values:[{x:50, y:randomStart+5}, {x:150, y:randomStart-5}, {x:250, y:randomStart+5}, {x:350, y:randomStart-5}, {x:450, y:randomStart+5}, {x:550, y:randomStart-5}, {x:770, y:randomStart+5}]}, ease:Cubic.easeInOut}); } } tMax.add(tweenArr); } This is the function I use to setup the tweens for the fishes. Each fish (set in an array called _difficulty) is given a set x value (offscreen) and a random y value so that each run they will 'swim' across the stage. This works perfectly. In fact, all of it runs perfectly...until I try to run it again. This is my initialization which basically stops the round if the fishes make it off the stage without being clicked (intended functionality). var tMax:TimelineMax = new TimelineMax({onComplete:endRound}); And this is the function it calls. function endRound():void { GoFishing.removeEventListener(MouseEvent.CLICK, fish); while (tweenArr.length > 0) { tweenArr.length = 0; } // tMax.clear(); POSSIBLE CODE? gotoAndStop("endGameResults"); scoreBox.text = "Your score is: " + points; gameResultsBG.width = 1; gameResultsBG.height = 1; TweenLite.to(gameResultsBG, 1.5, {scaleX:1.1, scaleY:1.1}); TweenLite.to(gameOverText, 3, {autoAlpha:1}); TweenLite.to(playAgain, 2, {visible:true}); timerX.stop(); timerX.removeEventListener(TimerEvent.TIMER, clock); playAgain.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { MovieClip(root).gotoAndStop(1); GoFishing.addEventListener(MouseEvent.CLICK, fish); round = 0; } ); } Don't mind the commented line at the top. Anyway, this function leads to frame 2 where it's an end-game screen and it allows you to retry. 'playAgain' would take you to frame 1 and play the tween again when the button at the top is clicked, or so I thought. This is where the fishes are frozen off screen (I expanded the window and saw), and they do not move when the function is called, BUT the timer for the timeline STILL RUNS. Know why? The timeline takes 10 seconds to run each time at first. On the second run, 10 seconds pass and it leads me to the end-game screen. So clearly the timeline is running as I would expect it to, but the fishes aren't being moved. Is there something wrong with my code here? Do I need a different approach? Also I just thought of this: Would disabling these fishes, or switching to another frame at any point mess up the tween functionality? Thank you for your help.
  22. Is it possible to animate object on circle path using Circlepath2d, but also transform it around its center? How to combine: path = new CirclePath2D(settings.x, settings.y, radius); or path = new RectanglePath2D(setting.x, setting.y, setting.xEnd - setting.x, setting.yEnd - setting.y); or path = new LinePath2D([new Point(setting.x, setting.y), new Point(setting.xEnd, setting.yEnd)]); follower = path.addFollower(item); TweenMax.to(follower, settings.duration, { progress:1 } ); With: TweenMax.to(item, settings.duration, { transformAroundCenterStarling: { x:settings.x, y:settings.y, scale:toScale}} );
  23. Hi, Here my problem, I use a small semantic template engine (transparency) and I can't make my TimelineMax works on elements that being templated. I guess I done something wrong, but I don't manage to make work my "staggerTo(.MyClass)" that is into my timeline and don't find any fonction to reload the selector or something like that. I give you a codepen of the problem. If any of you have sugestions Allan
  24. Greetings, I have a TweenMax that is has x initialized to 1332px. It's a simple animation from left to right along a 1332px long div. var tl2 = TweenMax.to(document.getElementById('point'), 1.5, { //x:0, y: 0, //repeat: 1, //onRepeat: playSound, yoyo: true, repeatDelay: 0, ease: Power0.easeNone, paused: true }); x gets set dynamically based on width of screen. At some point i'm rotating the div within which it runs by about 20 degrees so it can run from bottom left to upper right corner. To do than I'm trying to 1424px (just for the sake of argument, that's what I'm getting on one particular laptop): var pwa = $('.pointWorkArea'); pwa.css({ 'width' : someCrossLengthInPX /* change the width of div where animation runs */ }) .css({ 'transform' : 'rotate(' + eyeBaller.settings.crossAngle + 'deg)' }).css({'left' : -pwa.position().left}); tl2.updateTo({ x : someCrossLengthInPX }); ... however, I'm not seeing the change in DISTANCE the animation runs at. It rotates fine, but keeps running at the old side to side distance and not corner to corner. Any ideas?
  25. Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.
×