Jump to content
Search Community

Search the Community

Showing results for tags 'edge'.

  • 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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 20 results

  1. Hello, While I was testing this example in my own website with different browser, I noticed that it scrolls very smooth in Firefox (like the example in the codepen) but in Edge and Chrome no matter what ease I choose or how long the duration is, scroll is not smooth, I see that #Section suddenly jump under navigation bar and this is very annoying. Do you know how can I solve this? Thanks
  2. Hello guys! I'm truly new using Draggable product and I'm having a problem that I didn't find any solution on web I want to increase size to my container when the target hits the edge of. Actually, I'm using edgeResistance and it work very well but instead, I need to start a function that verifies the size of container and increase X px to width or height (depends where it hits) There's any option to verify when the target hits the edge and where (x,y)? Thank you
  3. I am dealing with a bug that seems be present only on Microsoft Edge < 15. Someone here know how resolve it or what is causing this? Chrome, Safari, Firefox, IE 11. Edge < 15 Here is the code for the animations. function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) { var widthHalf = maxWidthPercentage / 2; return TweenMax.to($element, durationSeconds, { width: maxWidthPercentage + '%', top: '-=' + widthHalf + '%', left: '-=' + widthHalf + '%', repeat: 1, yoyo: true }); }
  4. I hit a strange DrawSVG issue on my latest project. I was hunting every line of JS thinking I was doing something wrong, but I finally narrowed it down to the SVG stroke-linecap. If I set the stroke-linecap to 'round' or 'square', IE11 and Edge won't display the stroke as it animates. DrawSVG is animating all the values, but those two browsers display nothing. The weird thing is if I animate a new value for the strokeWidth along with the drawSVG animation, it works perfectly. Even a 1/1,000th change makes it work. Any strokeWidth value works as long as it isn't the same as the original value in the SVG. Another oddity is setting the stroke-linecap to 'butt', 'inherit' or leaving it out causes no problems either. All is fine in Chrome and FF, but the Microsoft browsers are behaving like fussy children.
  5. Hi Guys, Good Day, I'm having an issue on MS Edge where it doesn't render the animation properly without any user interaction. Sample of interaction is resizing and clicking on the image itself. https://codepen.io/denezra/full/paKero/ P.S. The animation is working properly in MS IE 11.
  6. Hi all, I just ran into a weird thing – CssRulePlugin doesn't seem to work in neither Edge 41.16299.15.0 nor IE 11.192.16299.0. Here is what I'm doing (the old 'animate max-height and set height to auto' trick): infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner'); TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); //TW is Tweenlite window.addEventListener('resize', () => { TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); }); This is no big deal as I can of course just use GSAP to do the same animation instead, but still, I thought I'd mention it. As soon as I remove the above code, everything else works fine.
  7. Hello GreenSocks! I've been working with gsap for a short while. But this is my first problem with which I can not get any further. So my first thread Hello!! My Goal is: to animate multiple Images to a Video. For this I found already a snippet (dont now the url anymore) which displays and hide immediately a image (Combined with a staggerTo). So my Problem is: It works! But not on all Browsers. If i clean the Cache or hit reload, over and over, the animation in Internet Explorer and Edge is very very flashy! My Question is: What went wrong?
  8. Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  9. I want this: https://support.google.com/webdesigner/answer/6212374?hl=en&ref_topic=3243982 to be possible in Adobe Edge Animate. So, I want to load content from a feed from adwords and show it in the ad I've created with adobe edge animate. I can't find how to do this. Anyone has a template or something?
  10. I'm writing the code to draw bar charts and am using timelinemax to animate the initial transition of the bars from 0 to their height. And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. Nothing displays at all in IE, but that seems to be a separate problem. I'm having a hard time recreating the exact problem in the code pen, but the pen doesn't animate the height in chrome and doesn't show anything in ff and edge, which is similar. Here is what the actual code looks like. var tl = new TimelineMax(); var delay = 1 / barData.Segments.length; for (var i = 0; i < barData.Segments.length; ++i) { var segPercent = barData.Segments.Count / maxValue; var segHeight = axisHeight * segPercent; var y = startY - segHeight - prevHeight - 1; // - 1 so that bar doesn't overlap axis var segColor = barData.Segments.Color; var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect"); bar.setAttribute("class", "bar-chart-segment"); bar.setAttribute("x", x + (barWidth / 10)); // bar.setAttribute("y", startY - prevHeight - 1); // magic numbers in these lines are for padding bar.setAttribute("width", barWidth - (barWidth / 10)); // bar.setAttribute("height", 0); bar.setAttribute("fill", rgbToHex(segColor.R, segColor.G, segColor.B )); bar.setAttribute("onclick", "showSVGChartDrilldown('" + uoKey + "', '" + barData.DrillDownArgs + "')"); group.appendChild(bar); tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay); tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);
  11. Hi, I bought the GSAP update to obtain the powerfull SVG plugins. But I've readen topics about edge and svg and I cannot make it work. I don't speak english very weel, so explanations seem quite confuse for me across the many pages of the forum. Can someone explain it in a synthetic page : how to use an Illustrator SVG file inside Edge Animate with GSAP and SVG draw and transform plugins ? Thanks a lot for your precious help. If you can produce a zip sample file too, that would be wonderfull. Thanks. Zhur
  12. Hi Everyone, I've created an edge animate website with 4 sections. Each section has some sort of simple animation to bring in content. The problem that I have is that when the user clicks on the navigation more than say 10-15 times the pages start seriously lagging until the page becomes unresponsive and crashes. I am testing this currently in Chrome and edge in IE. I have stripped this website right down to the bare bones and changed properties from Left and top to x and y and removed background images to see whether these things are causing the problem but the problem still persists. Here is the website and below is example code. Any help would be appreciated thank you. http://digital.akauk.com/_test/gsap/website/superhero.html Website code: // ----------------------------------------- SET VARIABLES ------------------------------------------------------- // TweenMax.defaultEase = Power2.easeInOut; // Stage dimensions var stageHeight = sym.$("Stage").height(); var stageWidth = sym.$("Stage").width(); var mainNavWidth = $("#Stage_mainNav").width(); var footerWidth = $("#Stage_footer").width(); var sHomeWidth = $("#Stage_sHome").width(); var sAboutWidth = $("#Stage_sAbout").width(); var sVideoWidth = $("#Stage_sVideo").width(); var sGalleryWidth = $("#Stage_sGallery").width(); sym.$("#Stage_mainNav").css({ "left": stageWidth/2 - mainNavWidth/2 }); sym.$("#Stage_footer").css({ "left": stageWidth/2 - footerWidth/2 }); sym.$("#Stage_sHome").css({ "left": stageWidth/2 - sHomeWidth/2 }); sym.$("#Stage_sAbout").css({ "left": stageWidth/2 - sAboutWidth/2 }); sym.$("#Stage_sVideo").css({ "left": stageWidth/2 - sVideoWidth/2 }); sym.$("#Stage_sGallery").css({ "left": stageWidth/2 - sGalleryWidth/2 }); // Background images sym.$("body").css({ "overflow-x" : "hidden" // Stop horizontal scrollbar }); var homeImage = sym.$("homeImage"); var aboutImage = sym.$("aboutImage"); var videoImage = sym.$("videoImg"); var galleryImage = sym.$("galleryImage"); homeImage.css({ "background-attachment": "fixed", "background-size": "cover", "-webkit-background-size": "cover", "background-position": "50% 50%", "background-repeat" : "no-repeat" }); aboutImage.css({ "background-attachment": "fixed", "background-size": "cover", "-webkit-background-size": "cover", "background-position": "50% 50%", "background-repeat" : "no-repeat" }); videoImage.css({ "background-attachment": "fixed", "background-size": "cover", "-webkit-background-size": "cover", "background-position": "50% 50%", "background-repeat" : "no-repeat" }); galleryImage.css({ "background-attachment": "fixed", "background-size": "cover", "-webkit-background-size": "cover", "background-position": "50% 50%", "background-repeat" : "no-repeat" }); // Main section containers var sHome = sym.$("sHome"); var sAbout = sym.$("sAbout"); var sVideo = sym.$("sVideo"); var sGallery = sym.$("sGallery"); var firstPlay = true; // Home section var flyingBoy = sym.getSymbol("sHome").$("flyingBoy"); var Logo = sym.getSymbol("sHome").$("Logo"); var homeImage = sym.$("homeImage"); var playerBg = sym.getSymbol("sHome").$("playerBg"); var footer = sym.$("footer"); var mainNav = sym.$("mainNav"); var buyNowBtn = sym.getSymbol("footer").$("buyNowBtn"); var facebookBtn = sym.getSymbol("mainNav").$("facebookBtn"); var twitterBtn = sym.getSymbol("mainNav").$("twitterBtn"); var animateFlyingBoy = new TweenMax(flyingBoy, 1.5, {paused:true, top:"56px", repeat:-1, yoyo:true, repeatDelay:0, ease:Linear.easeNone}); // About section var aboutImage = sym.$("aboutImage"); var aHeading = sym.getSymbol("sAbout").$("aHeading"); var text = sym.getSymbol("sAbout").$("Text"); var logo2 = sym.getSymbol("sAbout").$("logo2"); // Video section var videoImg = sym.$("videoImg"); var videoHeading = sym.getSymbol("sVideo").$("videoHeading"); var videoLogo = sym.getSymbol("sVideo").$("videoLogo"); var videoBtnLeft = sym.getSymbol("sVideo").$("arrowL"); var videoBtnRight = sym.getSymbol("sVideo").$("arrowR"); var videoThumbsContainer = $("#Stage_sVideo_containerHolder"); // Gallery section var aImagesGallery = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", "images/img4.jpg", "images/img5.jpg", "images/img6.jpg"]; var totalImagesGallery = aImagesGallery.length; var slideToGallery = 0; var imageWidthGallery = 944; var tGallery; var arrowRGallery = sym.getSymbol(sGallery).$("arrowR"); var arrowLGallery = sym.getSymbol(sGallery).$("arrowL"); var containerGallery = sym.getSymbol(sGallery).getSymbol("containerHolder").$("container"); // Main nav button colours var bSelected = "#a21111"; var bNormal = "#ffffff"; // Main Nav Buttons var bHome = sym.getSymbol("mainNav").$("homeBtn"); var bAbout = sym.getSymbol("mainNav").$("aboutBtn"); var bVideo = sym.getSymbol("mainNav").$("videoBtn"); var bGallery = sym.getSymbol("mainNav").$("galleryBtn"); // Gallery var nextImage_btn = sym.getSymbol(sGallery).$("btnNext"); var prevImage_btn = sym.getSymbol(sGallery).$("btnPrevious"); var imageCount = 1; // Video var t; // Thumb reference var arrowR = sym.getSymbol(sVideo).$("arrowR"); var arrowL = sym.getSymbol(sVideo).$("arrowL"); var container = sym.getSymbol(sVideo).getSymbol("containerHolder").$("container"); var containerHolder = sym.getSymbol(sVideo).$("containerHolder"); var closeVideoBtn = sym.getSymbol(sVideo).$("closeVideoBtn"); var currentSection = "home"; //the section you are currently on var nextSection; //the section you are navigation to // Initialise call initialise(); // ---------------------------------------- INITIALISATION ----------------------------------------------- // function initialise() { //console.log("initialise"); enableNav(); initialStates(); prepPosAlpha(); showHomeSection(); disableNavElement(bHome); } // end initialise(); function initialStates() { //console.log("initialStates"); // Home section flyingBoy["origX"] = flyingBoy.position().left; Logo["origY"] = Logo.position().top; playerBg["origY"] = playerBg.position().top; // About section aHeading["origY"] = aHeading.position().top; text["origY"] = text.position().top; aboutImage["origX"] = aboutImage.position().left; // Video section videoHeading["origY"] = videoHeading.position().top; containerHolder["origY"] = containerHolder.position().top; videoBtnLeft["origX"] = videoBtnLeft.position().left; videoBtnRight["origX"] = videoBtnRight.position().left; // Gallery section arrowRGallery["origX"] = arrowRGallery.position().left; arrowLGallery["origX"] = arrowLGallery.position().left; containerGallery["origX"] = containerGallery.position().left; } // end initialStates(); function prepPosAlpha(){ //console.log("prepPosAlpha"); // Prep home flyingBoy["offStageX"] = "-500px"; TweenMax.set(flyingBoy, {scale:0, opacity:0, x:flyingBoy["offStageX"]}); TweenMax.set(Logo, {scale:2, opacity:0}); TweenMax.set(playerBg, {y: playerBg["origY"] + 25, opacity:0}); TweenMax.set(homeImage, {opacity:0}); // Prep About TweenMax.set(aboutImage, {opacity:0}); TweenMax.set(aHeading, {opacity:0, y:aHeading["origY"] + 25}); TweenMax.set(text, {opacity:0, y:text["origY"] + 25}); TweenMax.set(logo2, {opacity:0, scale:2}); // Prep video TweenMax.set(videoImg, {opacity:0}); TweenMax.set(videoHeading, {opacity:0, y:videoHeading["origY"] + 25}); TweenMax.set(videoLogo, {opacity:0, scale:2}); TweenMax.set(videoBtnLeft, {opacity:0, x:videoBtnLeft["origX"] + 125}); TweenMax.set(videoBtnRight, {opacity:0, x:videoBtnRight["origX"] - 125}); TweenMax.set(containerHolder, {opacity:0, y:containerHolder["origY"] + 25}); // Prep Gallery TweenMax.set(arrowLGallery, {x:arrowLGallery["origX"] - 125, opacity:0}); TweenMax.set(arrowRGallery, {x:arrowRGallery["origX"] + 125, opacity:0.5}); TweenMax.set(containerGallery, {x:containerGallery["origX"], opacity:0}); // Hide sections TweenMax.set([sHome, sAbout, sGallery, sVideo], {visibility:"hidden"}); } // Show section functions function showNextSection() { if(nextSection == "home"){ showHomeSection(); } if(nextSection == "about"){ showAboutSection(); } if(nextSection == "videos"){ showVideoSection(); } if(nextSection == "gallery") { showGallerySection(); } } // end showNextSection(); function showHomeSection(){ introHome(); currentSection = "home"; } function showAboutSection(){ introAbout(); currentSection = "about"; } function showVideoSection(){ introVideo(); currentSection = "videos"; } function showGallerySection(){ introGallery(); currentSection = "gallery"; } // ----------------------------------------- RESET SECTIONS ------------------------------------------------------- // function resetCurrentSection() { // console.log("resetCurrentSection"); // Reset sections by moving objects to original positions if(currentSection == "home") { resetHomeSection(); return; } if(currentSection == "videos") { resetVideoSection(); return; } if(currentSection == "about") { resetAboutSection(); return; } if(currentSection == "gallery") { resetGallerySection(); return; } } // end resetCurrentSection() function resetHomeSection() { // Pause video player //player.pauseVideo(); // Pause tweening boy animateFlyingBoy.pause(); // Hide player // Reset elements for homesection TweenMax.set(homeImage, {opacity:0}); TweenMax.set(Logo, {scale:2, opacity:0}); TweenMax.set(playerBg, {opacity:0, y:playerBg["origY"] + 25}); TweenMax.set(flyingBoy, {scale:0, opacity:0, x:flyingBoy["offStageX"]}); hideSections(); } // end resetHomeSection() function resetAboutSection() { // Send scrollbar to page top TweenMax.set(aboutImage, {opacity:0}); TweenMax.set(aHeading, {opacity:0, y:aHeading["origY"] + 25}); TweenMax.set(text, {opacity:0, y:text["origY"] + 25}); TweenMax.set(logo2, {opacity:0, scale:2}); hideSections(); } // end resetAboutSection() function resetVideoSection() { // Stop video player //fullscreenplayer.stopVideo(); // Hide videoplayer //$("#Stage_sVideo_fullscreenplayer").hide(); // Hide close button closeVideoBtn.hide(); // Show video buttons videoBtnRight.show(); videoBtnLeft.show(); // Reset objects TweenMax.set(videoImg, {opacity:0}); TweenMax.set(videoHeading, {opacity:0, y:videoHeading["origY"] + 25}); TweenMax.set(videoLogo, {opacity:0, scale:2}); TweenMax.set(videoBtnLeft, {opacity:0, x:videoBtnLeft["origX"] - 125}); TweenMax.set(videoBtnRight, {opacity:0, x:videoBtnRight["origX"] + 125}); TweenMax.set(containerHolder, {opacity:0, y:containerHolder["origY"] + 25}); TweenMax.set(container, {x:0}); slideTo = 0; videoBtnLeft.hide(); hideSections(); } // end resetVideoSection() function resetGallerySection() { // Reset arrows TweenMax.set(arrowLGallery, {left:arrowLGallery["origX"] - 125, opacity:0}); TweenMax.set(arrowRGallery, {left:arrowRGallery["origX"] + 125, opacity:0}); // Reset gallery slideToGallery = 0; // Reset containerGallery TweenMax.set(containerGallery, {left:containerGallery["origX"], opacity:0}); hideSections(); arrowLGallery.hide(); arrowRGallery.show(); } // end resetGallerySection() // --------------------------------------- HIDE SECTIONS ------------------------------------------------------- // function hideSections(){ // Hide Sections TweenMax.set([sHome, sAbout, sGallery, sVideo], {visibility:"hidden"}); } // ----------------------------------------- NAVIGATION ------------------------------------------------------- // buyNowBtn.bind("click", function(){ //console.log("buyNowBtn clicked"); }); buyNowBtn.bind("mouseover", function(){ TweenMax.to(this, 0.5, {opacity:0.7}); }); buyNowBtn.bind("mouseout", function(){ TweenMax.to(this, 0.5, {opacity:1}); }); facebookBtn.bind("click", function(){ //console.log("facebook clicked"); }); facebookBtn.bind("mouseover", function(){ TweenMax.to(this, 0.5, {opacity:0.7}); }); facebookBtn.bind("mouseout", function(){ TweenMax.to(this, 0.5, {opacity:1}); }); twitterBtn.bind("click", function(){ console.log("twitter clicked"); }); twitterBtn.bind("mouseover", function(){ TweenMax.to(this, 0.5, {opacity:0.7}); }); twitterBtn.bind("mouseout", function(){ TweenMax.to(this, 0.5, {opacity:1}); }); function enableNav(){ // Deselect buttons bHome.css("color", bNormal); bAbout.css("color", bNormal); bVideo.css("color", bNormal); bGallery.css("color", bNormal); // Home button bHome.bind("click", function(){ navControl($(this)); }) bHome.bind("mouseover", function(){ onOver($(this)); }) bHome.bind("mouseout", function(){ onOut($(this)); }) // About button bAbout.bind("click", function() { navControl($(this)); }); bAbout.bind("mouseover", function() { onOver($(this)); }); bAbout.bind("mouseout", function() { onOut($(this)); }); // Video button bVideo.bind("click", function() { navControl($(this)); }); bVideo.bind("mouseover", function() { onOver($(this)); }); bVideo.bind("mouseout", function() { onOut($(this)); }); //Gallery bGallery.bind("click", function() { navControl($(this)); }); bGallery.bind("mouseover", function() { onOver($(this)); }); bGallery.bind("mouseout", function() { onOut($(this)); }); } // end enableNav() function onOver(obj){ $(obj).css("color", bSelected); } function onOut(obj){ $(obj).css("color", bNormal); } function disableNavElement(btn){ btn.unbind("click"); btn.unbind("mouseover"); btn.unbind("mouseout"); btn.css("color", bSelected) } function navControl(obj){ // Kill all tweens TweenMax.killAll(false); resetCurrentSection(); var bName = $(obj).attr('id').substr(14); // $(obj) // Enable button enableNav(); if( bName == "homeBtn") { nextSection = "home"; disableNavElement(bHome); } if( bName == "aboutBtn") { nextSection = "about"; disableNavElement(bAbout); } if( bName == "videoBtn") { nextSection = "videos"; disableNavElement(bVideo); } if( bName == "galleryBtn") { nextSection = "gallery"; disableNavElement(bGallery); } // Display next section showNextSection(); } // ---------------------- HOME ------------------------------------------- // function introHome(){ //console.log("introHome"); //sHome.show(); TweenMax.set([sHome], {visibility:"visible"}); // Animate in elements if(firstPlay){ TweenMax.from(mainNav, 0.3, {opacity:0, immediateRender:false}); TweenMax.from(footer, 0.3, {opacity:0, immediateRender:false}); firstPlay = false; } TweenMax.to(homeImage, 0.5, {opacity:1, delay:0, immediateRender:false}); TweenMax.to(playerBg, 0.5, {y:playerBg["origY"], opacity:1, delay:0.3, immediateRender:false}); TweenMax.to(Logo, 0.5, {opacity:1, scale:1, delay:0.6, immediateRender:false, onComplete:function(){ //$("#Stage_sHome_player").show(); player.playVideo(); }}); TweenMax.to(flyingBoy, 1, {scale:1, immediateRender:false, x:flyingBoy["origX"], opacity:1, delay:0.9, onComplete:function(){ animateFlyingBoy.play(); } }); } // end introHome(); //------------------------ ABOUT ----------------------------------------// function introAbout(){ //console.log("introAbout"); //sAbout.show(); TweenMax.set([sAbout], {visibility:"visible"}); TweenMax.to(aboutImage, 0.5, {opacity:1, x:aboutImage["origX"], delay:0, immediateRender:false}); TweenMax.to(aHeading, 0.5, {opacity:1, y: aHeading["origY"], delay:0.3, immediateRender:false}); TweenMax.to(text, 0.5, {opacity:1, y :text["origY"], delay:0.6, immediateRender:false}); TweenMax.to(logo2, 0.5, {opacity:1, scale:1, delay:0.9, immediateRender:false}); } // end introAbout() //------------------------ VIDEO ----------------------------------------// function introVideo() { // console.log("introVideo"); // sVideo.show(); TweenMax.set([sVideo], {visibility:"visible"}); TweenMax.to(videoImg, 0.5, {opacity:1}); TweenMax.to(videoHeading, 0.5, {y:videoHeading["origY"], opacity:1, delay:0.3}); TweenMax.to(containerHolder, 0.5, {opacity:1, y:containerHolder["origY"], delay:0.6}); TweenMax.to(videoLogo, 0.5, {opacity:1, scale:1, delay:0.9}); TweenMax.to(videoBtnLeft, 0.5, {opacity:1, x:videoBtnLeft["origX"], delay:1.2}); TweenMax.to(videoBtnRight, 0.5, {opacity:1, x:videoBtnRight["origX"], delay:1.2}); } // end introVideo() //------------------------ GALLERY --------------------------------------// function introGallery(){ //console.log("introGallery()"); // Show gallery section // sGallery.show(); TweenMax.set([sGallery], {visibility:"visible"}); TweenMax.to(containerGallery, 0.5, {opacity:1, x:containerGallery["origX"]}); TweenMax.to(arrowRGallery, 0.5, {x:arrowRGallery["origX"], opacity:1, delay:0.3}); TweenMax.to(arrowLGallery, 0.5, {x:arrowLGallery["origX"], opacity:1, delay:0.3}); } nextImage_btn.click(function(){ imageCount++; sym.getSymbol("sGallery").$("photo").attr("src", "images/img"+ imageCount + ".jpg"); if(imageCount >= 5) { nextImage_btn.hide(); } else { nextImage_btn.show(); prevImage_btn.show(); } }); prevImage_btn.click(function(){ imageCount--; sym.getSymbol(sGallery).$("photo").attr("src", "images/img"+ imageCount + ".jpg"); if(imageCount <= 1){ prevImage_btn.hide(); } else { prevImage_btn.show(); nextImage_btn.show(); } }); // ------------------------- VIDEO SECTION -------------------------------- // var aVidThumbs = ["images/thumb01.jpg", "images/thumb02.jpg", "images/thumb03.jpg", "images/thumb04.jpg", "images/thumb05.jpg", "images/thumb06.jpg", "images/thumb05.jpg", "images/thumb06.jpg"]; var aYouTubeStr = ["-DaPBBOHfsA", "DlM2CWNTQ84", "DMEa0CJbAUs", "-DaPBBOHfsA", "DlM2CWNTQ84", "DMEa0CJbAUs", "-DaPBBOHfsA", "DlM2CWNTQ84"]; var totalImages = aVidThumbs.length; var slideTo = 0; var imageWidth = 253; // vidPlayer init $("#Stage_sVideo_fullscreenplayer").hide(); closeVideoBtn.hide(); closeVideoBtn.bind("click", function(){ footer.show(); fullscreenplayer.stopVideo(); TweenMax.to($("#Stage_sVideo_fullscreenplayer"), 0.5, {opacity:0, onComplete:function(){ $("#Stage_sVideo_fullscreenplayer").hide(); }}); // Hide close button $(this).hide(); }) TweenMax.set($("#Stage_sVideo_fullscreenplayer"), {opacity:0}); imageSymbolArray = []; photoBorderArray = []; vHolderBgArray = []; function traceSelected (symbolInTheArray){ $("#Stage_sVideo_fullscreenplayer").show(); closeVideoBtn.show(); footer.hide(); TweenMax.to($("#Stage_sVideo_fullscreenplayer"), 0.5, {opacity:1}); fullscreenplayer.loadVideoById({'videoId' : aYouTubeStr[symbolInTheArray.getVariable("index")]}); } // end traceSelected(); for(i=0; i<aVidThumbs.length; i++){ t = sym.createChildSymbol("videoHolder", container); t.$("photo").css({"background-image" : "url('" + aVidThumbs + "')"}); t.$("photoBorder").css({"opacity" : "0"}); photoBorderArray.push(t.$("photoBorder")); t.getSymbolElement().css({"position" : "absolute", "left":i*270+"px"}); // 253px + 17px for margin t.getSymbolElement().css({"cursor" : "pointer"}); t.setVariable("index",i); imageSymbolArray.push(t); } // For thumb click and large video $.each(imageSymbolArray, function( count, symbolInTheArray ){ //create jQuery reference to the item - not really needed here but shows how to do it. var menuItem = $(symbolInTheArray); //create a jQuery reference to the DIV element inside the symbol. var menuElement = $(symbolInTheArray.getSymbolElement()); //now you can bind interactivity to the menu items' DIVs menuElement.bind ("click", function(){ traceSelected(symbolInTheArray); }); } ) $.each(photoBorderArray, function( count, photoBorderInTheArray ){ //create jQuery reference to the item - not really needed here but shows how to do it. var borderPhotoItem = $( photoBorderInTheArray); //create a jQuery reference to the DIV element inside the symbol. //var menuElement = $(symbolInTheArray.getSymbolElement()); //now you can bind interactivity to the menu items' DIVs borderPhotoItem.bind ("mouseover", function(){ TweenMax.to(this, 0.5, {opacity:1}); }); borderPhotoItem.bind ("mouseout", function(){ TweenMax.to(this, 0.5, {opacity:0}); }); } ) // Hide left arrow arrowL.hide(); arrowR.bind("click", function(){ arrowL.show(); if(slideTo<totalImages-3){ slideTo++; slideContainer(); $(this).show(); } if(slideTo == totalImages-3){ $(this).hide(); } }); arrowL.bind("click", function(){ arrowR.show(); if(slideTo>0) { slideTo--; slideContainer(); } if(slideTo == 0) { arrowL.hide(); } }); arrowR.bind("mouseover", function(){ TweenMax.to(this, 0.3, {opacity:0.7}); }); arrowR.bind("mouseout", function(){ TweenMax.to(this, 0.3, {opacity:1}); }); arrowL.bind("mouseover", function(){ TweenMax.to(this, 0.3, {opacity:0.7}); }); arrowL.bind("mouseout", function(){ TweenMax.to(this, 0.3, {opacity:1}); }); function slideContainer() { TweenMax.to(container, .8, {left: -slideTo*(imageWidth+17)}); } // ------------------------ GALLERY ------------------------------------- // var galleryFirstPlay = true; for(j=0; j<aImagesGallery.length; j++){ //console.log(j); tGallery = sym.createChildSymbol("imgHolder", containerGallery); tGallery.$("photo").css({"background-image" : "url('" + aImagesGallery[j] + "')"}); tGallery.getSymbolElement().css({"position" : "absolute", "left":j*944+"px"}); } // Hide left arrow arrowLGallery.hide(); arrowRGallery.bind("click", function(){ if(slideToGallery<totalImagesGallery-1){ slideToGallery++; slideContainerGallery(); $(this).show(); } if(slideToGallery == totalImagesGallery-1){ $(this).hide(); } arrowLGallery.show(); }); arrowRGallery.bind("mouseover", function(){ TweenMax.to(this, 0.3, {opacity:0.7}); }); arrowRGallery.bind("mouseout", function(){ TweenMax.to(this, 0.3, {opacity:1}); }); arrowLGallery.bind("click", function(){ arrowRGallery.show(); if(slideToGallery>0) { slideToGallery--; slideContainerGallery(); } if(slideToGallery == 0) { $(this).hide(); } }); arrowLGallery.bind("mouseover", function(){ TweenMax.to(this, 0.3, {opacity:0.7}); }); arrowLGallery.bind("mouseout", function(){ TweenMax.to(this, 0.3, {opacity:1}); }); function slideContainerGallery() { //console.log("slide " + slideToGallery) TweenMax.to(containerGallery, .8, {left: -slideToGallery*imageWidthGallery}); }
  13. Hello there, i would like to learn parallax scrolling on adobe edge animate with GreenSock elements. I would like to make same kind effects on http://marquonslhistoire.com/en/quarterfinals/ please contact me if you can help me to teaching to make this kind project.
  14. I have a site that lets users drag through a series of pages horizontally. When they reach the end of a series of pages and they drag the container, the edge-resistance kicks in. As they continue to drag against the resistance, the container still moves to the left revealing the background behind. This is how the site is supposed to work. This is how it used to work a few months ago. Now what I see is different. When I drag past the right edge, I can see that the scrollbar is "stretching" indicating the edge-resistance is working. However, the container does not move past the edge. It seems like the transform: translate3d() is not working. I can see the number growing in ie translate3d(-1px, 0px, 0px) -> translate3d(-2px, 0px, 0px). But the container is not moving. Did something change? I first noticed this problem in Firefox, but with the latest version of Draggable, I see it in Chrome, too (it still works in IE). Here is a simplified demo: Codepen URL: http://codepen.io/stephendlei/pen/azQaPb Dragging the first (green) block past the left edge produces the desired result. But moving the last (red) block past the right edge does not. The red block doesn't move and the gray background is not revealed. Note: If I cut down the number of blocks to just 1, the behavior will work as expected. Is there something I'm doing with the inline-blocks that is causing issues?
  15. I've got some Flash animations to convert to HTML. Since I have Adobe Edge as part of the CC subscription, I thought I'd give it a go. After a lot of head-scratching and teeth-gnashing over the syntax, I more or less have the basic stuff figured out. I think GSAP is far simpler to use than the Timeline-based "point 'n click" method. What I can't seem to address is how to use GSAP to change the color of a Symbol in Edge. The CSS for backgroundColor doesn't do anything - see the following code snippet - the rotation and opacity changes occur on hover, but the color of the object does not change. // insert code to be run when the mouse hovers over the object var element = sym.$("Sphere"); TweenMax.to (element, 2, { css:{backGroundColor: "#FF9933", rotation:135, opacity:.5}, ease:Elastic.easeOut}); Stupid syntax error, but I can't seem to see it. TIA for your help!
  16. Hi I am new to Greensock, so please be gentle. I have built a new Adobe Edge Animate site. It works and display fine for me when I run it form my pc through the file url. However, when I then copy it onto our webserver, the display changes. Functionally it still works as expected. I have attached 2 screenshots showing the difference. As it is in Edge Animate, I don't quite know how to do the codepen. I am figuring it has something to do with this section of code TweenLite.set($container, {height: gridRows * gridHeight + 10, width: gridColumns * gridWidth + 1}); TweenLite.set(".box", {width:gridWidth * .9, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"}); TweenLite.set(".boxBack", {width:gridWidth * .9, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"}); TweenLite.set(".boxText", {width:gridWidth * .8, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"}); $(".boxText").css("font-size","18px"); $(".boxText").css("left","5px"); $(".boxText").css("top","1px"); $(".AnswerText").css("font-size","18px"); TweenLite.set(".Answer", {width:gridWidth * 1.5, height:gridHeight * 1, lineHeight:gridHeight + "px"}); TweenLite.set(".AnswerText", {width:gridWidth * 1.3, height:gridHeight * 1, lineHeight:gridHeight + "px"}); I am also loading from the cdn via yepnope yepnope( { nope:[ // loads the external script for dragging and dropping 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js,http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js,http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js' ], complete: init }); Any Ideas ?? ***************** So that's odd. It seems like if I refresh the page, the issue goes away, but ctrl+F5 the page and it comes back. The issue occurs with both Chrome and IE as indicated. Confusing
  17. Hi, I love GSAP. That gives incredible features in Edge Animate, Adobe DPS and Aquafadas ! Thanks for all. But, I'm trying to build a 3D model using some combined symbols inside Edge Animate (like a menu including some pictures wiches are all in a 3D orientation with rotationY). Then, each picture tween I can write works lonely, and the global menu too. But when I try to animate the pictures while I am moving in 3D the menu, pictures are staying in 2D. And the 3D animation of the pictures looks 2D, staying thin, flat, as if I could only tween one object in one 3D space at the same time. How should I do, to organise my symbols as a real 3D composition and build something like a coverflow ? Thanks.
  18. Hello everybody, I am a completly new EdgeUser. I am more familiar with AfterEffects, but I can imagine the things you can do with a tool like edge. I used flash for several years but more like copy and paste (AS2). What I am looking for is basically very easy, but not for me. I searched and searched but I cant found the solution for: get the parent symbol an do some tweening with tweenMax: TweenMax.to(sym.$("jacket01"),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut}); //I am currently inside an element named ("menue"), from here I want to tween a Symbol named ("jacket01") which is on the stage. I tryed a lot of things but nothing realy worked: TweenMax.to(sym.$("jacket01").parent(),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut}); I cant find the answer to such a simple question. I would be great if there is someone of your professional coders could give me an answer. It would be very helpful to dive in the new edge tool. Thank you very, very much in advance from germany P.S. This is my first result with adobe Edge: fake-RangeRover_site all done with edge: http://go-motion.net/range03
  19. Hello everybody, My brain loops!! I create a mouseover whith Adobe Edge and TweenMax, thats not the problem, but inside this symbol there is an element which also should work with mouseover TweenMax. But it does not work well. The symbol: //mouseover TweenMax.to(sym.$("bilder"),3,{css:{y:0, scale:1}, ease:Expo.easeOut}); the element inside the symbol: //mouseover TweenMax.to(sym.$("blue02"),0.4,{css:{scale:1, opacity:0.5}}); example: http://go-motion.net/edge/men/menue.html download: http://go-motion.net/edge/men.zip Any help would be great. THX Oliver from Germany
  20. So has anyone been using Adobe Edge? Ok, so I really thought about whether this should be shared or not (and promoting some possibly bad Greensock usage/code in the process - thus sort of being detrimental to the point of Greensock JS in the first place). But hey, it's still using Greensock JS after all.. This tutorial shows how to import and use Greensock JS within Adobe Edge: http://chrisgannon.w...ipt-adobe-edge/ Adobe Edge is the new HTML/jQuery based animation program, and it may SOME DAY end up being the equivalent to the Flash IDE. That's if Adobe can figure out a way - not just to make cool animations - but also to create better, re-usable code behind the pretty scenes (so that other people can actually edit it if they're developers and not just animators). If Adobe succeeds, then this method of being able to import Greensock JS into Edge might be like you can do to import Greensock libraries in Flash and use it in the program. Edge is only still in Beta and has a long way to go before it's ready to do any professional projects.. because the size of the files it creates and organization of code is not great, let's just say. As such, think of this tutorial, and Edge as only a fun thing to play around in for now! At least now we know Greensock JS is usable in it!
×
×
  • Create New...