Search the Community
Showing results for tags 'javascript'.
-
Hi everybody, first time posting here. I've created this example on CodePen to loop a certain part of an animation consisting two frames. I did this by declaring two variables as two separate timelines (TimelineLite and TimelineMax), and then called the function to replay the second frame only. You can take a look at how I wrote this by referring to the CodePen link. I'm still learning both GreenSock and JavaScript, and I feel I've come a long way, but I'd like to know is there a better way to code this without using multiple timelines? Even though I'm satisfied with how the code works, I'm open to feedback if there is a neater way to write this code.
-
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
-
Hi Guys, I've been lurking on this forum for a while and have hit finally got to the point where I need to ask some questions. Firstly I'd like to say Hi and I really like what I've seen on this forum, I've been a full stack developer for 16 years but the banner world is fairly new to me (I did help out with some flash banners way back). The situation I'm in is I'm a tech lead, the previous front end dev used to look after the banners and the process was very adhoc. I have a freelancer with no banner experience so I'm trying to hold his hand through the process even though I don't know much more than him. I'm trying to put some processes and standards in place for banner development. For the campaign that I'm working on currently, I've tried out this Yeoman generator - BuildABanner , using the DoubleClick template. I like what I see, it's generating a nice folder structure, with nice gulp tasks and best practices (polite loading content etc). Using the DoubleClick template it makes proper use of the enabler events and it's triggering an Exit event as the clicktag. I can see in the console when I click on it that the enabler is receiving the event. Example; bgExit = document.getElementById('background_exit_ad'); //Add Event Listeners for DoubleClick addListeners = function() { bgExit.addEventListener('click', bgExitHandler, false); } bgExitHandler = function(e) { //Call Exits Enabler.exit('HTML5_Background_Clickthrough'); } I've been tasked with developing some banners built to 'doubleclick' spec but will be served on two different networks/suppliers (Cadreon and Ansible). I'm still struggling to grasp the difference between the platforms and networks etc. So I thought I'd do a test before sending it off to the media agency (so I don't look like an idiot). I tried out this DoubleClick Campaign Manager HTML5 Validator. When I validate my banner (with the above click tag) it passes all the rules except for the click tag and says that it's not present. I thought that the enabler.exit event was the best practice way to do this? When I look back at some previous banners developed by my old front end dev, he had simply referenced the enabler.js, but implemented the click tag this way, marked up in the comments as "Standard ClickTag"; Example; <html> <head> <meta name="ad.size" content="height=0,width=0"> <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> <script> var clickTag = "http://www.google.org"; </script> </head> <body> <a href="javascript:window.open(window.clickTag)">blah</a> </body> </html> Adding this into my banner along side the exit event would be doubling up the events so as I see it - I should be using one or the other? Is this tool just stupid? I don't mind simplifying the code and doing it the generic way but it makes more sense to me as a dev to use the proper events within enabler and it would also allow me to keep the buildabanner generated code as untouched as possible. Also does anyone have any feedback on the buildabanner system itself?? Does anyone use it? Or do you use a different yeoman tool? Very keen to hear some real world feedback on this. Thanks Marty
-
Hi, I want to create a line on top of the frame i.e. the line should start from the center and grow simultaneously towards the side. Have given the sample link (this is in TimeLineLite): I want to add the above code to the following banner (have attached the files as well): The problem that I am facing is how to add this to "TimeLineMax" and the line should start/grow along with the word that eases in the screen. Thanks sample.zip -
I have an image: and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image? I have also tried other solution of fill mode but smooth transition is not happening in it.
-
How can I make a text float in like a wave from left to right. I am able to get the text into the frame normally but not like a wave form. Is there a way of doing it?
-
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
-
Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen
-
Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/
-
Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
-
Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip
-
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.
-
Because you are one of the people who knew Flash and understood what made it great, I thought I'd ask. I was originally going to title this post "Any chance Greensock could replace CreateJS in AnimateCC?" Then I realized what I was asking was a little bigger. However, that is the gist of what I'm wondering. Is there a way to use the Greensock library as the engine that drives the animation when publishing from AnimateCC instead of CreateJS? The CreateJS library isn't getting updates (worse than Flash and Air). It's slow on mobile. Interaction is unbearably laggy. It's essentially unusable for any decent experience. But Greensock has always been the bleeding edge of speed, efficiency and stability. If it were powering all the timeline tweens and interactions when users published to html5, Flash could again be a viable tool for creating animation and games on the web. The Flash tool provided a wonderful GUI with which to create animation and games for coders and noncoders alike. When you published, it just worked. Nearly a decade after its 'death' we still haven't found a suitable replacement. Greensock is great. But there are those of us who find it prohibitively difficult to animate with code. And maybe I should just be asking for a Greensock GUI that has a timeline and MovieClips like Flash. But Animate is there. And it might just need the power and performance of Greensock to make it live again.
-
OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>
-
Hi! I have a HTML5 banner advertisement that I'd like to automatically replay the animation on a loop. Is this possible? I have attached the HTML5 banner advertisement source files. Please let me know how to accomplish this. Thank you for your help! 120x600_v2.zip
-
Hello! I am trying to make an animated SVG of a complex map. I have over 120 elements in my animation. Most of these are paths but some of them are also polygons (circular). Here's a CodePen: http://codepen.io/i76/pen/vgwKKX I am a JavaScript novice. I searched this forum and found a script (in Carl's post) which allows me to draw a path- var orig1 = document.querySelector('#lineAB'); var obj1 = {length:0, pathLength:orig1.getTotalLength()}; orig1.style.stroke = '#f60'; var t1 = TweenMax.to(obj1, 10, {length:obj1.pathLength, onUpdate:drawLine1, ease:Linear.easeNone}) function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' '); } However, this does not work with polygons. My guess is that there is not built-in polygon.Length object in JS. I have found this function on another forum that would measure the length of a polygon but I am not sure how to implement it- getPolygonLength:function(el){ var points = el.attr('points'); points = points.split(" "); var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; for(var i = 0; i < points.length; i++){ var coords = points[i].split(","); if(x1 == null && y1 == null){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x1 = coords[0]; y1 = coords[1]; x3 = coords[0]; y3 = coords[1]; }else{ if(coords[0] != "" && coords[1] != ""){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x2 = coords[0]; y2 = coords[1]; lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); x1 = x2; y1 = y2; if(i == points.length-2){ lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); } } } } return lineLength; } If it doesn't take very long would anyone be able to include the above function into the snippet above so I have a way of animating the polygons as well? Many thanks in advance!
-
Hi, I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds. I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work. Can anyone help me out in this. Here is the link to the jsfiddle: https://jsfiddle.net/5pq750ko/ (If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working) Thanks
-
Hello, I have a websocket project I'm working on. When a user joins the site they get a div created for them with an icon as background image. I have a function that runs on DOMContentLoaded that creates fake user divs and wanted to build a timeline of animation moving them around via the X and Y properties in TweenLite. I am really stuck scratching my head - my TimelineMax produces console logs on Update() but nothinggggg moves. I could really appreciate a second pair of eyes! I've distilled the function in question down to a codepen. Thank you in advance! Stephen
-
Sorry guys, my question might not be entirely related to Tweenmax or animations ( ) !! I stuck with the piece of code below where basically we animate sections with mousewheel . Each sections has it's own animations (intro and outro) .And i stuck at the end trying to concatenate functions and call them. I already ask on stackoverflow but their solutions is not something i'm confortable with yet. Here is the sample code var siteGlobal = (function(){ init(); var init = function(){ bindEvents(); } // then i got my function to bind events var bindEvents = function(){ $(document).on('mousewheel', mouseNav()); $(document).on('keyup', mouseNav()); } // then i got my function here for capture the event var mouseNav = function(){ // the code here will capture direction // nextSection(); } var nextSection = function(){ // Here we check if there is prev() or next() section // if there is do the change on the section // switchSection(); } var switchSection = function(nextsection){ // Get the current section and remove active class // get the next section - add active class // get the name of the section with data-name attribute // throw the animation var myFunctionOnEnter = window['section'+ Name + 'Exit']; } // Let's pretend one section is call Intro var sectionIntroExit = function(){ // animation code here } }(); Calling myFunctionOnEnter() doesn's seems to work..What did i do wrong?
-
Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on. The problem: I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I push it doesn't move again. Surely is a much more simple problem than how I think but I would really want to know if is normal that doesn't work more than once. Here there is the code of the Tweens: $('#frecciaDx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:-200}}); }); $('#frecciaSx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:200}}); }); $('#frecciaSu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: 600 }); }); $('#frecciaGiu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: -600 }); }); Thank you really much guys!
-
Hey guys I am Justin, first post here. The community over here seems to know there stuff so hopefully you can solve my problem with making tabs in GSAP I am making this website like eBay, but much smaller scale. The top of the site is broken into three tabs. Browse / My Hub / Sell. If the user is in the browse tab he will be searching listings (this is also the default tab on the home page) If the user is in My Hub he will be looking at account information and watchlist... If the user is in sell he will be selling things ect. I can do simple tabs no worries but I need help with advanced tabs. Each tab will have lots of links and links within links ect. But I want the tabs to act just like the tabs do in chrome, so the user can go to all different places in each tabbed section of the site and the other tabs will be right how they were... This is so users can be browsing and decide to add funds, sell something, look at there account, update details.... they can then go back to where they were browsing. Maybe I can use browser cache for the other two tabs that are not used each time the used tab page loads. I would almost want it so the user could upload photos in the sell tab wile browsing listings in the sell tab. I don't know if it can be done, but I am looking forward to any advice/basic codepen.
-
I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.) One of the most time consuming thing was in the end - adding new object to my scene. 1. I create div element with a path to image source and id 2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry) 3. I set object to opacity:0 and showing it when it's time My question is - what technologies i can use to make this step easier? I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.
-
im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance
-
Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!
-
I'm using the Greenscok Draggable as a themostat. The temperature increases or decrease at every 18 degrees rotation (also based on clockwise or counter-clockwise). I'm grabbing the rotation and using the remainder operator (%) and if it is equal to 0, the temperature changes. With the dial at 0 (rotation), the temperature is at 18 and at -180 (rotation), the dial should reach 26 degrees. However, the rotation and the temperature don't seem to be working in unison. Just to add, the temperature should be at 22 degrees at -90 (rotation). Here is the codepen: http://codepen.io/jetchy/pen/EgAdgP Thanks.
