Search the Community

Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran

Hello, in my current project that is a fullscreen site, the visitor first sees an introduction animation. After thsi animation the timeline is paused. The user now can navigate through diffrent screens by using the mousewheel. Each screens animations are part of the main timeline that is declared global and are labeled. I am using TimelineMax and the main timeline is declared global to access it from everywhere where its needed. Navigating through the screens and all animations are working but I have the following problem: When an timeline section (screen animation group) is running I dont want the user to be able to scroll further untill the animation is finished. But I cant check the current state / status of the main timeline. I have tried .active(), .paused() but according to my logging output they dont seem to change. So how can I access the current state of the timeline? Markup: <!-- HTML TAG AND <head> --> <body> <!-- Screens do also have some markup inside but thats unnecessary --> <div id="screen-1" class="screen"></div> <div id="screen-2" class="screen"></div> <div id="screen-3" class="screen"></div> <div id="screen-4" class="screen"></div> </body> JavaScript TimelineCreation $(function(){ //Get necessary DOM elements with jQuery //and declaring timeline var tl = new TimelineMax(); /* ... some more code ... */ //Creating timeline //Introduction animation tl.add(TweenMax.to(/* my animation */)); //Labels are declared in an array, each screen has an own label tl.addLabel(sceneLabel[0]); //add more animations tl.addLabel(sceneLabel[1]); // more animations ... tl.addLabel(sceneLabel[n]); }); Mousewheelhandler function mouseWheelHandler(e) { //Following condition as always false no matter when triggered, //also tried .paused() but its also not working if ( tl.isActive() === true ) { return; } if (e.deltaY > 0) { //Scrolldown console.log("scrollDown"); currentScreen += 1; } else if (e.deltaY < 0) { //Scrollup currentScreen -= 1; } if (currentScreen > maxScreens) { currentScreen = maxScreens - 1; return; } else if (currentScreen <= 0) { currentScreen = 1; return; } tl.tweenTo(sceneLabels[currentScreen]); }

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

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!

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?

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>

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?

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

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.

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

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

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

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

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!