Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'html5'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi Guys Can you help me to develop carousel banner with adobe animate, or i have to do it html5 code, can you guys share any sample, thank you so much
  2. Kanst

    HTML5 Masking

    Hi Guys, (and thx for the forum and thx in general to Greensock) I need a simple reveal/masking "trick"? I call it a trick, because i dont belive that there is a direct method for it in CSS/HTML5. I call it simple, 'cause i need it basically in it's simplest form. So: - 2 layers that are interconnected (div's or img's or whatever) - Layer 1 is invisible and controls what is shown of the 2nd layer. - Layer 1 can be animated. (Basic masking - like in the old and very much simpler Flash days ) Anyone figured this out? I see a lot of SVG masking discussed, but thats not what i need in this case. (so please dont refer me to those threads, im pretty sure i have investigated anything within reason for an explanation) Also, please no -webkit stuff. It needs to be solid across browsers. Hope that You guys can help an old time Greensock user out. Thx in advance /Simon
  3. Can someone assist me on change this current animation: TweenLite.fromTo(spot_holder[kNumIterator], 2, {left:pointAX, top:pointAY}, {left:pointBX, top:pointBY, immediateRender:false}); to this: TweenLite.fromTo(spot_holder[kNumIterator], { ease: Bounce.easeOut, y: -500 }); or what do I change to make the animation HAVE a bounce effect, zoom effect or any other effect
  4. Hello, I was wondering if anyone had any idea how this website https://www.box.com/ did their first animation? ie, as you scroll down, the box opens up and shows images -> how do they do the box that opens up? Any help greatly appreciated
  5. 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
  6. 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.
  7. 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?
  8. After i uploaded the .zip file to the browser it shows 3 errors 1-Missing Primary asset check 2-Relative asset check 3-secure URL check I used Edge animate And in the creation complete i used "" var mobile = sym.$("mobile"); var logo = sym.$("logo"); var t1 = sym.$("t1"); var bx1 = sym.$("bx1"); var buynow = sym.$("buynow"); TweenLite.from(mobile, 1, {y: "30",alpha:0, delay:1,ease: Back.easeOut }); TweenLite.from(logo, 1, {alpha:0, delay:2,ease: Sine.easeOut }); TweenLite.from(buynow, 1, {scaleX:0,scaleY:0,alpha:0, delay:4,ease: Elastic.easeOut }); TweenLite.from(bx1, 1, {x: "30",alpha:0, delay:2.5,ease: Back.easeOut }); TweenLite.from(t1, 1, {y: "10",alpha:0, delay:3,ease: Back.easeOut }); "" i need help please !! I can't understand what to do ?
  9. Hi i'm creating a banner and using gsap to do some particle animation, I need to keep the filesize down so i'm using TweenLite instead of TweenMax One thing that doesent seem to work with TweenLite is pauseAll? Is that correct, or do i need to add a plugin or something? Or, is there alternative way to mimick the TweenMax.pauseAll() with TweenLite Thanks
  10. 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
  11. Hi! Is it possible to animate <details> tag somehow using GSAP?
  12. Hey everyone, I have hit a snag in my development. I have created a new timeline that i want to repeat once it finishes.It seemingly works but for some reason it doesn't start the repeat from the first tween but instead the second tween in the list tlMain = new TimelineMax({repeat:-1}); tlMain //I WANT the repeat to start from here in the timeline and play ALL tween below BUT... .fromTo(Pocket, 0.5, {scaleX: 3, scaleY: 3, autoAlpha: 0}, {scaleX: 1, scaleY: 1, autoAlpha: 1}) //Repeat seems to start here in the timeline instead, skipping the first part of my animation .fromTo(Pocket, 0.1, {scaleX: 1, scaleY: 1}, {scaleX: 1.04, scaleY: 1.04}, '-=0.05') .fromTo(Pocket, 0.15, {scaleX: 1.04, scaleY: 1.04}, {scaleX: 1, scaleY: 1}, '-=0.05') .fromTo(Crumbs1, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.15") .fromTo(Crumbs2, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.2") .fromTo(Crumbs3, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.3") .fromTo(LogoContainer, 1, {y: '-175px'}, {y: '0px'}) .fromTo(line1, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line2, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line3, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .repeat(-1).repeatDelay(2)//Repeat Call can anyone see why it repeats starting after the first tween instead of starting from the very beginning of the timeline?
  13. Hi guys! Your community is awesome! I often read this forum but now I can not find an answer to my question. I need to make a responsive banner that stretches vertically and horizontally within certain limits (320x268 -> 1080x328). Inside this responsive container must play video. Advertising requirements are as follows: <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> <a id="click1_area" href="#" target="_blank">...</a> <a id="click2_area" href="#" target="_blank">...</a> <a id="click3_area" href="#" target="_blank">...</a> // After "<a href ...></a>" assign them to click handlers: <script> document.getElementById("click1_area").href = getUrlParam('link1'); document.getElementById("click2_area").href = getUrlParam('link2'); document.getElementById("click3_area").href = getUrlParam('link3'); </script> For Video: Thank you guys for any help!
  14. 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.
  15. Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner. I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow. have a look at my codepen to see what i am trying to achieve here: https://codepen.io/Caderial/pen/LbYRVZ What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops? Please advise. I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution. thanks everyone!
  16. Hello .. To anyone that needs to pause() and resume() your GSAP animations when switching browser tabs or windows and have them stay in sync. I did more tests and found that Firefox and Chrome where sometimes not firing the event focus and blur, when you left the active tab. So i found a better way that is consistent, to check if the current active tab has focus or not, using the HTML5 Visibility API. // main visibility API function // use visibility API to check if current tab is active or not var vis = (function(){ var stateKey, eventKey, keys = { hidden: "visibilitychange", webkitHidden: "webkitvisibilitychange", mozHidden: "mozvisibilitychange", msHidden: "msvisibilitychange" }; for (stateKey in keys) { if (stateKey in document) { eventKey = keys[stateKey]; break; } } return function(c) { if (c) document.addEventListener(eventKey, c); return !document[stateKey]; } })(); Use the HTML5 Visibility API like this: // check if current tab is active or not vis(function(){ if(vis()){ // tween resume() code goes here setTimeout(function(){ console.log("tab is visible - has focus"); },300); } else { // tween pause() code goes here console.log("tab is invisible - has blur"); } }); You will still need the following to check if other windows have focus or not (blur). Chromium type browser like Google Chrome or Latest Opera do not fire all the time when binding the event with jQuery window, so you need to check for window.addEventListener. // check if browser window has focus var notIE = (document.documentMode === undefined), isChromium = window.chrome; if (notIE && !isChromium) { // checks for Firefox and other NON IE Chrome versions $(window).on("focusin", function () { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }).on("focusout", function () { // tween pause() code goes here console.log("blur"); }); } else { // checks for IE and Chromium versions if (window.addEventListener) { // bind focus event window.addEventListener("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }, false); // bind blur event window.addEventListener("blur", function (event) { // tween pause() code goes here console.log("blur"); }, false); } else { // bind focus event window.attachEvent("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }); // bind focus event window.attachEvent("blur", function (event) { // tween pause() code goes here console.log("blur"); }); } } You will also notice that i have a setTimeout() in the focus event handler so the tab/window has enough time to gain focus, and so the focus event handler fire consistently. I noticed Firefox and Google Chrome were not resuming correctly unless i added the setTimeout(). The reason i use the HTML5 Visibility API is because some browsers like Chrome wont trigger the tab blur unless you actually click inside the other new tab, simply scrolling with the mouse wont trigger the event, I hope this helps anyone who needs to pause() and resume() their animation so they don't get out of sync. **UPDATE** FULL PAGE mode: http://codepen.io/jonathan/full/sxgJl EDIT mode: http://codepen.io/jonathan/pen/sxgJl To Test, try: First clicking inside the Preview panel so the page gains focus (important) Switching between tabs Giving another program focus and come back to the browser See below post for more info Also.. I made it into a jQuery plugin called TabWindowVisibilityManager so you only have to define your pause() and resume() code once inside the FOCUS and BLUR callbacks. See the bottom post. TabWindowVisibilityManager.zip
  17. Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC? All text looks a bit fuzzy when publishing. Google search mentioned stage.snapToPixelEnabled = True; That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates. Thanks in advance for the amazing brains out there. -Ray
  18. Hi, Check out this new Greensock tutorial that shows how to create smaller, faster HTML5 ads from Adobe Animate with GSAP. http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/ Topics covered-- Using GreenSock with Adobe Animate (Flash) Using ActionScript (AS2 or AS3) or JS for HTML5 ads Automatically optimizing your assets with one click Working with clickTags Retina/High DPI asset setup Handle multiple exits on buttons with onClick Handle rollovers with onMouseOver/Out Call JavaScript on the page from timeline code in the FLA Show an ad preloaded Test and validate the ad http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/
  19. HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
  20. Dear All, i have seen this tutorial where the animation can be controled by the input value of a slider. http://greensock.com/sequence-video I have a variable definde in my code which has a value between 0 and 1. Is it possible to control the progress for the animation with the value from this variable?
  21. I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo
  22. Hi, I'm not really a coder, was hoping for some help. Trying to convert some Flash banners to HTML5. There is some Greensock scripting in the file and I need to rewrite for HTML5. Code below. Could anyone tell me how to rewrite these functions? function initTween_pig1() { com.greensock.TweenNano.from(pig1_mc, 1.7, {_alpha: 0, _xscale: 0, _yscale: 0, ease: com.greensock.easing.Elastic.easeOut}); } function initTween_pig2() { com.greensock.TweenNano.to(pig2_mc, 1.7, {_alpha: 100, _xscale: 150, _yscale: 150, ease: com.greensock.easing.Elastic.easeOut}); } function initTween_pig3() { com.greensock.TweenNano.to(pig3_mc, 1.7, {_alpha: 100, _xscale: 200, _yscale: 200, ease: com.greensock.easing.Elastic.easeOut}); } function initTween_pig4() { com.greensock.TweenNano.to(pig4_mc, 1.7, {_alpha: 100, _xscale: 250, _yscale: 250, ease: com.greensock.easing.Elastic.easeOut}); } function initTween_pig5() { com.greensock.TweenNano.to(pig5_mc, 1.7, {_alpha: 65, _xscale: 400, _yscale: 400, ease: com.greensock.easing.Elastic.easeOut}); } function initTween_pink() { com.greensock.TweenNano.from(pinkSquare_mc, 0.1, {_alpha: 0, ease: com.greensock.easing.Linear.easeIn, overwrite: 1}); } initTween_pig1();
  23. Hey i was wondering if you could help me guys, in the past years I used to create alot of ADs using flash AS2 / AS3, always relied on GS as the most easy way to build apps. Now that AnimateCC was realized i thought it would be a nice idea to work on AD projects again... i searched the forums, the website and so on... http://greensock.com/animatecc-quickstart <- found the guide and read it, started to build my own test-ADs. It works so nice when i use the premade templates of GS. BUT ONLY when i deploy the AD in animate cc, the html (combined with an ip and so on) works just fine BUUUTTT if i just open the HTML, i only get nothing but a white screen with the black border where the add was supposed to be what did i do wrong? i rebuild my banner a few times, tried to figure it out, but i have no clue why it`s like that :/
  24. Hello guys, I was wondering if there is any solution for the localconnection between two html5 iframes for the wallpaper format of a banners ? I saw that adform has one as well as many other 3rd party services but they all, of course, are requiring using their services in order to use the localconnection. So, is there any script for that yet ? I started to write my own but it would be helpful to see if someone has made any progress on this. Thanks
  25. 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?
×