Search the Community

Showing results for tags 'error'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 39 results

  1. Hi guys been trying to make an animation for work where there is an image that goes from left to right with a clipping path to make the image have some sort of cut on the top. My problem is that it doesn't work on safari but somehow works on every other browser even firefox. I linked all the assets needed in the same folder to make the animation. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{clip-path: url(#clip1); position: absolute; top: 0; left: 0;} #svg-defs {position: absolute; width: 0px;height: 0px;} </style> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <body> <svg id="svg-defs"> <defs> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </defs> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" src="bg_01.jpg" width="160" height="600"/> </div> </div> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> var start = 0.1; var trans = 0.3; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); tl1.from('#mask1', trans, { x: -170,y: -35,ease: Power1.Out}) tl.to([tl1], start, "sequence", "-=0.45") </script> </body> </html> That was the original code. I made the animation slower and tried all i can to fix it on this code but some reason the only way it seemed to work is if i constantly resized the browser. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{ /* clip-path: url(#clip1); */ -webkit-clip-path: url(#clip1); position: absolute; top: 0; left: 0; } body{ width: 200px; height: 800px; } #myAd{ width: 200px; height: 800px; } .svg-defs {position: absolute; width: 0px;height: 0px;} </style> <!-- <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> --> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> function resize(){ console.log("tick"); window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 requestAnimationFrame(function(){ console.log("requested") }) } function main(){ // TweenLite.ticker.useRAF(false); // TweenMax.lagSmoothing(1000, 16); var ad = document.getElementById('myAd'); var mask1 = document.getElementById('mask1'); var img = document.getElementById('img1'); function update(){ console.log(img) // console.log("tick"); // window.dispatchEvent(new Event('resize')) } setInterval(update, 1000); // TweenMax.ticker.addEventListener("tick", update); var start = 0.1; var trans = 5; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); var mask1 = document.getElementById("mask1"); var clip1 = document.getElementById("clip1"); var ad = document.getElementById("myAd") tl1.from(ad, 10, { x: 0,y: 0 }) tl.from(mask1, trans, { x: -170,y: -35,ease: Power1.Out}) // tl1.from(mask1, trans, { // x: -170,y: -35,ease: Power1.Out}) // tl.to([tl1], // start, // "sequence", // "-=0.45") // TweenMax.ticker.removeEventListener("tick", update); } </script> </head> <body onLoad="main();" onResize="resize();"> <svg class="svg-defs"> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" class="" src="bg_01.jpg" width="160" height="600"/> </div> </body> </html> TweenMax.min.js mine_testing for browsers.html
  2. Uncaught Cannot add undefined

    Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. Hey guys, sooo first time i am getting this. Cannot understand why. My other documents work but with this i am suddenly getting this weird error. Must be something i am overlooking. Btw everything is in one file because i am making something for google adwords Help would be very much appreciated. Side question: item 1 from x-250 to 0 (center) fade out(opacity 0 ) item 2 from x-250 to 0 (center) fade out(opacity 0 ) item 3 from x-250 to 0 (center) fade out(opacity 0 ) Could this be achieved with stagger? and how? thankss!
  3. hey , Hi Hello ... I have read your answer to this topic : that's awesome and a smart guy developed it a little bit (tnx to a user asked about the same problem) ... add saving what swf lastly loaded (using shared object) and fade in loading swf etc ... Now it's all great but I faced a big problem in my output : Error 2006 The Supplied Index is Out of Bounds How can I get ride of this ... any help is appreciated... stackoverflow is a mess to solve this ... tnx for your help carl the code : import flash.events.FullScreenEvent; import flash.display.StageScaleMode; stage.scaleMode = StageScaleMode.EXACT_FIT; stage.displayState = StageDisplayState.FULL_SCREEN; import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.net.SharedObject; import flash.events.MouseEvent; var mySO:SharedObject = SharedObject.getLocal("saver"); var loaderIndex:Number = -1; loaderIndex = mySO.data.my_vis; if (!mySO.data.my_vis) { loaderIndex = -1; } if (mySO.data.my_vis == 1) { loaderIndex = 0; } if (mySO.data.my_vis == 2) { loaderIndex = 1; } if (mySO.data.my_vis == 3) { loaderIndex = 2; } if (mySO.data.my_vis == 4) { loaderIndex = 3; } progress_mc.scaleX = 0; var currentLoader:SWFLoader; var swfs:LoaderMax = new LoaderMax({onComplete:completeHandler,onProgress:progressHandler,onChildComplete:childCompleteHandler}); swfs.append(new SWFLoader("part1.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part2.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part3.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part4.swf", {container:this.stage, autoPlay:false})); function progressHandler(e:LoaderEvent):void { progress_mc.scaleX = e.target.progress; } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); e.target.content.visible = false; } function completeHandler(e:LoaderEvent):void { trace("all swfs loaded"); progress_mc.visible = false; initCurrentLoader(); addEventListener(Event.ENTER_FRAME, trackSWFPlayback); } function initCurrentLoader() { loaderIndex++; trace(loaderIndex); mySO.data.my_vis = loaderIndex; mySO.flush (); if (loaderIndex == swfs.numChildren) { //reset back to 0 if the last swf has already played //loaderIndex = 0; //can't show stuff that was unloaded so lets stop mySO.clear(); loaderIndex = -1 swfs.load(); trace("all done everyone gone"); removeEventListener(Event.ENTER_FRAME, trackSWFPlayback); } else { //dynamically reference current loader based on value of loaderIndex currentLoader = swfs.getChildAt(loaderIndex); trace(currentLoader); trace(loaderIndex); //make the content of the current loader visible currentLoader.content.visible = true; //fade it in TweenLite.from(currentLoader.content, 0.1, {alpha:1}); //tell the current loader's swf to to play currentLoader.rawContent.gotoAndPlay(1); } } function trackSWFPlayback(e:Event):void { //trace(currentLoader.rawContent.currentFrame); //detect if the loaded swf is on the last frame if (currentLoader.rawContent.currentFrame == currentLoader.rawContent.totalFrames) { trace("swf done"); //hide and stop current swf currentLoader.content.visible = false; currentLoader.rawContent.stop(); //unload the swf that just played currentLoader.unload(); //set up and play the next swf initCurrentLoader(); } } this.addEventListener(Event.ENTER_FRAME, loadSWFs) function loadSWFs(e:Event):void{ load_btn.visible = false; swfs.load(); this.removeEventListener(Event.ENTER_FRAME, loadSWFs) } /* Click to Hide an Object Clicking on the specified symbol instance hides it. Instructions: 1. Use this code for objects that are currently visible. */
  4. I have a website in which I'm trying to load the TweenMax tag; https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js Everytime I try to do it, I get this: TweenMax.min.js:16 Uncaught TypeError: Cannot read property 'greensock' of undefined at Function.<anonymous> (TweenMax.min.js:16) at check (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at new c (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at t._gsDefine (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at TweenMax.min.js:16 at TweenMax.min.js:16 But, when I load the TweenLite tag (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js) before hand, the TweenMax tag loads just fine. The website I'm trying to add this to is: http://www.pergunteaumamulher.com/ (it's in Brazilian portuguese). You can try to add the tag in the console to see the behavior I'm pointing out. Have you ever seen something like this? I believe it might be the same problem we have seen in here: Has it ever being addressed?
  5. Tweenmax in mobile

    Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '
  6. Error when referencing object in array as param of .set method

    This looks so simple but I just can't figure out what the problem is. I'm creating a bezierPlugin demo and use an array of point objects both to define the bezier path and to distribute visual guides. TweenMax throws an error `invalid css tween value: [object Object]` like the objects aren't valid, but everything looks fine to me. The loop and pen works fine with any hardcoded object such as `{ x: 100, y: 100 }`. Why is the referenced object invalid in the `TweenMax.set()`? // Create dots and distribute them along the bezier path for (var i=0; i<6; i++) { var blueDot = new Dot(container); blueDot.target.className = "blue-dot"; //TweenMax.set(blueDot.target, pointObjects[i]); console.log(pointObjects[i]); // Looks like a valid object to me } Un-comment line 38 and see it break. Many thanks!
  7. SplitText PlugIn Console error

    Hi guys, I am using the splitText plugin in a Rich Media expandable unit: I loaded the plugin after TweenMax in this order right before the bottom closing body tag for a rich media Doubleclick creative: <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> <script src="SplitText.min.js"></script> <script src="logic.js"></script> In the head I loaded the enabler necessary for the Doubleclick Rich media API to work as intended as usual... The ad works fine, the split text works as intended, it splits the lines and wraps the lines in classes. In the collapsed state it will run an animation that has the split text call in the ad's show() function: function show() { var mySplitTxt = new SplitText('#txt1C', {type:'lines', linesClass:'line++'}); var tlCollapsed = new TimelineMax(); tlCollapsed .set(mySplitTxt, {opacity:0.9}) //more stuff .staggerFrom(mySplitTxt.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=0.5') //more stuff } When previewing in the browser, no error appears. Only after I expand the ad I can see: Console Error: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js:15 Uncaught TypeError: a.split is not a function This happens on expand: When the expand button is clicked, the unit expands and runs the tlExpand timeline. expandButton.addEventListener('click', onExpandHandler, false); var splitTxt1E = new SplitText('#txt1E', {type:'lines', linesClass:'line++'}); var splitLegal = new SplitText('#legal', {type:'lines', linesClass:'line++'}); var tlExpand = new TimelineMax({paused:true, overwrite:'all', onComplete:cardSheen}); tlExpand .set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block', visibility:'visible'}) .set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}) //more stuff .staggerFrom(splitTxt1E.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=1.3') function onExpandHandler(){ Enabler.requestExpand(); Enabler.startTimer('Panel Expansion'); } function expandStartHandler() { TweenMax.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block'}); TweenMax.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}); // add expanding animation here tlExpand.restart(); Enabler.finishExpand(); } I will try to stripped down codepen but in the meanwhile, any clues as to what could be happening that causes the error when the unit is expanded? Again, the animation works as intended. Thanks!
  8. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
  9. Draggable not working in Firefox

    Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error: TypeError: Argument 1 of SVGPoint.matrixTransform is not an object. And then the Draggable is not working at all Check it here: http://gsap.mouret.dk/ Any suggestions?
  10. Unrecoverable syntax error

    Hi, Does anyone know why I get an unrecoverable syntax error in JSHint? Below is a script that I have tweaked. The original version was animated. $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Just nu '+belopp+'</h3>'); }); } }); }); _________________________________________ The original version $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Drömvinsten är just nu <br /> '+belopp+'</h3>'); var txt = $(".txt"); var txtIndex = -1; var playAnimation = 0; function playAgain() { if (playAnimation <= 4) { showNextTxt(); } else { ++txtIndex; $(".endframe").show(); $(".jackpot").hide(); } } function showNextTxt() { ++txtIndex; ++playAnimation; txt.eq(txtIndex % txt.length).fadeIn(200).delay(3000).fadeOut(300, playAgain); } showNextTxt(); }); } }); }); Best, A
  11. String concat Error in 1.19.1

    Hey guys, great product. Thank you so much!
  12. Set className throws error in Firefox

    Hi all, Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina). This is the code that causes the error: this.tl .set(this.modalBackground, { display: "block", className: "+=" + this.modalBackgroundModClass }) The classname line causes the following error in Firefox: TypeError: this.ownerSVGElement is null This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this: this.tl .set(this.modalBackground, { display: "block", onComplete: function () { this.modalBackground.classList.add(this.modalBackgroundModClass); }.bind(this) }) But I would like to use the className way. Any idea on what is going wrong? Thanks in advance.
  13. reverse() skipping frames

    I'm having a problem with calling reverse on a timeline. It's jumping to the beginning and end of the animation. Can anyone help me solve this problem I'm having? Thanks, Ryan
  14. TweenMax is not defined

    I am using Wordpress and am loading TweenMax via the functions.php file like this: add_action('wp_enqueue_scripts', 'child_scripts'); function child_scripts() { wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'); wp_enqueue_script('main-js', get_stylesheet_directory_uri() . 'main.js', array('gsap'), false, true); } Both <script> tags are showing up fine and in the correct order in the page source code after load and there are no loading errors for either resource. I am trying to use TweenMax with the typical TweenMax.to() statement in the above referenced main.js file, but I am getting the "TweenMax is not defined" error that usually indicates that I forgot to include the library. It happens even after all plugins are deactivated and when using the 2016 theme. I have used TweenMax many times before and have never run into this issue.
  15. Hi, I have used this script to animate a loop. The end animation look fine and everything seems to work. But when i open the JS file with Adobe Dreameweaver I get many complaints (missing semicolon, ’text2’ is not defined, and missing ’used strict’ statement). Do I need to be worried? Best, Ava window.onload = function () { var tl = new TimelineMax({repeat:-1}); loop = 0; loopMax = 3; tl.to(text1, 1.2, {top:0,opacity:1,ease:Power4.easeOut}) .to(text1, 1.2, {delay:.6,top:600,ease:Power4.easeIn}) .to(text1, 0, {top:-600,ease:Power4.easeOut}) .to(text2, 1.2, {top:0,opacity:1,ease:Power4.easeOut}) .from(text3, 1, {top:0, opacity:0,scale:0,ease:Bounce.easeOut}) .call(loopCheck) .to(text3, 0.5, {delay:1.2,opacity:0,scale:0,ease:Power4.easeOut}) .to(text2, 1.2, {top:600,ease:Power4.easeIn}) tl.timeScale(1) function loopCheck() { console.log("loopCheck") loop++; if (loop < loopMax) { console.log("play again") tl.play(); } else{ console.log("done") tl.pause(); } } }
  16. Hey folks! I got this strange error only in IE/Edge and Windows Phones. Safari, Firefox and Chrome works just fine. check the site here: www.grace-restaurant.at when i animate the content it outputs me the following error into the console multiple times: unable to set property "cssText" of undefined or null reference. so first i thought, theres something wrong with the selector, i sometimes used a jquery selector inside using the method .not(). so i changed that, but the errors still occur. then i thought maybe its the css plugin so i deleted the use of css:{} gsap method where its not necessary. stil doestn work. I really have no clue what it could be. Of course i'm not assuming its a gsap bug or problem, but isn't it weird, that it only occurs in IE and Windows Phone? Maybe anyone has a clue what this could be? thanks in advance
  17. AdHelper js_defer error?

    I've been creating some banners in Animate CC using GSAP and AdHelper as presented here. Using the GSAP_AdStarter.fla template. I managed to get the banner running on my local machine just fine when I test it, but as soon as I upload it to the testing server to view it, the banner will not load and I keep getting an error thrown: PSA ERROR: Exception while evaluating.preloader is undefined It's being called from js_defer.js. The banner does not load (only displays the default "Loading Advertisement...") and I cannot figure out why this happens. Has anyone else come across this error? And if so, is there a solution?
  18. How can I make this work? I want to pause, clear/reset my TimelineMax from this onclick function call. I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console. Is what I'm trying to do correct or possible? <div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div> </div> An abbreviatated JS version of the init02() function has this: function init02(){ var tl2 = new TimelineMax(); tl2.to... } Thank you for your time and help.
  19. Hi all! I have some strange error with ie 11 (may be earlier versions too). Here is a simple example of my code: var gfx_obj = {}; gfx_obj.r1 = 1; gfx_obj.r2 = 1; gfx_obj.r3 = 1; gfx_obj.r4 = 1; function appearGFX(num) { TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut}); } appearGFX(1); So this gives me error in IE only (all other modern browsers is OK). Screenshot of error is attached. Any thoughts how to fix it?
  20. Hello GSAP, I've got my SVG animation working in CodePen, here's a rough start: http://codepen.io/atkinson/pen/bVqqBm/ but when I place in a WordPress site I'm getting this error in the console: "Uncaught TypeError: Cannot read property 'length' of undefined". I'm loading TweenMax via enqueue scripts in my functions file, so all is good there. The SVG code is placed inline via visual composer/raw HTML. Is this somehow related to doc ready? The js file begins with: jQuery(document).ready(function ($) { I'm at a loss as to how to fix this... Forgive me as I'm a GSAP newbie! Any ideas? Thanks for your help!
  21. simplest splittext does not work

    Hi. I am new to gsap and like to reproduce the simplest splitText Example from the SpitText Introducing Video: http://greensock.com/SplitText This runs in codepen http://codepen.io/anon/pen/LVrzxN?editors=101 But not on my local machine. Why not? The SplitText.min.js File is loaded local. An thats what it looks like in Chrome.
  22. ReferenceError: TweenMax is not defined

    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
  23. I just started using these libraries today but I hit a bit of a roadblock. I am aware that my pen is awkwardly mixing css transforms and greensock tweens however even when all css transforms are commented this problem persists. The content on the back of the card flickers when rotating to match its fanning angle during the animation. The center one, which has no rotation, does not flicker at all. However the others do. Also strange is that the front of the card does not experience this at all. Additionally I noticed that onRelease does not seem to move the object back to the original location until after a mouse move event has occured. this means my mouseout animations will not trigger if you drag the card and then do not move the mouse. Any ideas on work arounds to these problems? The red line is just the area where the drag event should be forced to end and the blue line is the hand area. I sorry for the messy scss, I was trying to move over to greensock however now that this is broken Im not sure what to do. http://codepen.io/AdilSoubki/pen/dPwPRP
  24. Help - not working in Chrome

    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
  25. GSAP not working at all?

    Hi there. I'm working on developing a demo to present to my company tomorrow on the wonders of GSAP. However, for some reason, on my company network, my ads aren't displaying. Here is an old ad that i made that I made as a demo that I know worked before, yet is showing as blank. http://simplisticallycomplicated.biz/portfolio/2013/01/09/dsg-ad-created-with-html5-animation/ Here is my new code that I'm working on, super simple, yet the tweenlite calls aren't being made. You can see I'm linking to the JS files, locally, even. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> #adcontainer { width:300px; height:250px; overflow:hidden; border:1px solid #A7A7A2; background-image:url(../images/background.jpg); } #gearup { font-family: Anderson 1938, Verdana, Geneva, sans-serif; font-size:56px; text-align:center; color:#fff; opacity:0; } </style> <title>Snowsports HTML5</title> </head> <body> <div id="adcontainer"> <div id="gearup">GEAR UP</div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="/js/CSSPlugin.min.js"></script> <script src="/js/EasePack.min.js"></script> <script src="/js/TweenLite.min.js"></script> <script> window.onload = function(){ TweenLite.to("gearup", 1, {alpha:1}); } </script> </body> </html>