Search the Community

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!!

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

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

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

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?

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

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>

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?

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!

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?

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.

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?

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.

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.

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 ... ?

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

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});

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).

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.

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.

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.

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.

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.

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.

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!