Search the Community

Showing results for tags 'fade'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 12 results

  1. shmdhussain

    CrossFading slideshow using GSAP

    I tried the CrossFading slideshow demo as in this url http://css3.bradshawenterprises.com/cfimg/#cfimg3, I tried in the codepen using GSAP but I am able to achieve it using hardcoding the number of images using nth-child, In my scenario number of images is variable. Is it any way to achieve it better using GSAP than this. Thanks in advance for any help
  2. Hi. This is my first time using Greensock, also I'm a beginner in javascript. I don't know if my code is beautiful or not, and I ask you to not pay too much attention to that aspect (or maybe you should, that'd help me) Basically, everything is working as I want it to, there's just one minor change I want: Before the text fades out again, I want there to be a delay again. I don't know how or where to put that delay in. All suggestions are welcome : )
  3. nick2price

    Fade in and slide up

    Hi all, Firstly, I hope you don't mind me using a JSFiddle, I tried to use the starter pen but it said my account was linked to spam (I was not logged in). The JSFiddle example I have is here https://jsfiddle.net/z69w9u4g/45/ I am using Scroll Magic, but my problem is more related to TweenMax. I have a lot of sections and each of them have some text on them. In my example, I done a dummy section so you can see the scroll effect. What I am after is for each block of text to fade in, whilst at the same time slightly slide up. As you can see in my example, I am kind of achieving this. However, the text is sliding up into the other section. Really, I am after a bit of advice on a couple of things. Firstly, if I remove the slide up portion of the code, you will see the natural position of the text (just at the top of the section). Really, I want all blocks of text to sit about 50-100 px below their natural position, and slide up to their natural position. Is there any way to set the starting point for this block of text? My next question relates to best practices. As I mentioned, I have a lot of blocks of text in different sections. Do I need to repeat this code for each block of text, or is there are way to make it reusable? Any advice appreciated. Thanks
  4. Hi, I have animations working on a loop of 2 and then on last loop the last animation should stay on. But this is not happening Basically, the last .from shows the duration and then fades, but I haven't added a .to for it to fade, so then it should stay, no? Can anyone help? Code: function initAnim() { console.log("INIT ANIM"); if (loop < 2) { tl.pause(0, true); } tl.play(); tl.set(truck, {rotation: 51, x: 118, y: 83}) .from(truck, 2, {x:-150, y:250}) .from(line1, 1.5, {autoAlpha:0}, "-=0.5") .to(line1, 0.5, {autoAlpha:0}) .from(line2, 2.15, {autoAlpha:0}) .to(line2, 0.85, {autoAlpha:0},"leave") .to(truck, 0.75, {autoAlpha: 0},"leave") .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last") .call(loopCheck, ["param1"], this) } function loopCheck() { if (loop >= 2) { console.log("END"); tl.pause(); tl.invalidate(); } else { // tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim }) initAnim(); } loop++; }
  5. Pebble

    Moving and blinking animation

    Hi Many thanks to the moderators for their help with GSAP I need to be able to make moving animations blink or pulse. I have been able to do this using several tweens that move, blink and then restart, move and blink etc but this is choppy and not very elegant. I am sure there is a simpler way to do this but I don't know what it is. I wondered if there was a solution with the onRepeat function? I have created a codepen where I have a block moving and blinking over the complete duration of its path but I want to be able to control it's opacity in more detail. http://codepen.io/anon/pen/RGgJrA For example, it moves for a second or to a certain point and then it's opacity becomes zero, and then then returns to 1 and then seamlessly carries on its path for another second where it blinks again. Is it possible to do this with a single expression on one tween or do you have to chain animations together to make it work. One other question I have is about compatibility. I have tested GSAP on Chrome, Firefox, IE, Opera, iOS and Chrome on Android. It works fine on all that. I was wondering if it's compatible with other Android browsers? Many thanks for your help. I think GSAP is great. Pebble
  6. alextodea

    Several animations on click event

    Hey there Since I am rather an amateur, I find it difficult to resolve the following issue: So I have this circle animation that moves on the left side of the page when clicked. Everything nice so far. However, the plan is to show the body of my page after I click and hide it again after I click the circle again, making the circle to come back on its initial size. I know that there should be some kind of procedure where i set some variables with the names of the div i want to show, but i do not know how to chain more animations and keep them under the click event that i have on the circle. The main idea of my website is that, when the user accesses it, he could see only the circle and, after he clicks it, the content of the page is showed. Something similar to this website: http://sergeymast.com/ (i know that most of his animations are in css but i want to improve my gsap skills along the way). Thanks in advance for the help, I really appreciate it!
  7. I'm trying to create a line of text that slowly fades into view from left to right (or top to bottom, whatever). I see the very simple process of fading the entire text field in or out, but is there a way to fade vertically or horizontally? Thanks!
  8. harish118

    Move and fade html element

    hi, I am new to greensock js but it just seems to be awesome. I just got started tonight as I had to find a way to smoothen a javascript animation in one of our other projects. GreenSock animation it seems does not cause other animations to stutter/stop/jerk. But I quickly need this small help I have to move (100px?) an html element from point a to point b, and then fade it out. I have to keep repeating this sequence. A normal move should suffice but if I can add some easing or something then it will be great. Let me explain the scenario: I have an arrow that actually represents a moving vehicle. I just need to animate this arrow (make it appear as if it is moving from point a to point b, and then fade it out. Then repeat the sequence again. I just coded something like var logo = document.getElementById("id_1_2_c"); TweenMax.to(logo, 1, {left:"100px", repeat:-1}); But I need it to move right, and fade out once it reaches the end. Then it will have to appear and start moving from left to right again, and then fade. This sequence should go on infinitely. If I can add any easing to make it look nicer, that will be awesome Thanks a ton, If anyone can suggest how I can achieve this, it will be wonderful. Harish
  9. miccodan

    My Fade tween wont show, Very new!

    I am using The SuperScrollorama plugin, and used the "simple-demo" included with the plug-in (which works fine..) as a template in which I want to fade the given elements. Something identical to the "design process" section of this website www.comradeweb.com if you scroll about halfway down, you will see a cool timeline they have built outlining their design process. Like I said, I used the SimpleDemo included with SuperScrollorama which does work for me has a template for my fading tweens. However when I test my version my images fail to show up, although the images are their which I can tell by the scroll bar being scrollable but just being hidden and not becoming visible on the scroll event. I am very new to this, so its probably something basic. Any help is greatly appreciated, thanks in advance! Here is the SimpleDemo, which I have based mine of off... (this one works) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #1</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <style type="text/css"> #examples-1 { position: relative; } body { background-color: #272827; } #fade-it { position: absolute; left: 260px; top: 33px; } #1fade-it { position: absolute; left: 44px; top: 180px; } #2fade-it { position: absolute; left: 295px; top: 415px; } </style> </head> <body class="simple-demo"> <div id="content-wrapper"> <div id="examples-1"> <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" /> <img alt="img2" id="1fade-it" src="img2.png" width="733" height="313" /> <img src="img3.png" id="2fade-it"> </div> </div> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fade-it', TweenMax.from( $('#1fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fade-it', TweenMax.from( $('#2fade-it'), .5, {css:{opacity: 0}})); }); </script> </body></html> And here is my Code, which does not work, <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #2</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <style> body { background-color:#000; } #examples-1 { position: relative; } #fade-it { position: absolute; left: 260px; top: 33px; } #img2 { position: absolute; left: 44px; top: 180px; } #img3 { position: absolute; left: 295px; top: 415px; } #img4 { position: absolute; left: 235px; top: 638px; } #img5 { position: absolute; left: 527px; top: 1029px; } #img6 { position: absolute; left: 127px; top: 1190px; } #img7 { position: absolute; left: 476px; top: 1384px; } #img8 { position: absolute; left: 105px; top: 1651px; } #img9 { position: absolute; left: 133px; top: 1860px; } #img10 { position: absolute; left: 430px; top: 2096px; } #img11 { position: absolute; left: 222px; top: 2143px; } #img12 { position: absolute; left: 469px; top: 2419px; } #img13 { position: absolute; left: -2px; top: 2496px; } #img14 { position: absolute; left: 152px; top: 2716px; } #img15 { position: absolute; left: 20px; top: 3026px; } #img16 { position: absolute; left: 447px; top: 3051px; } #img17 { position: absolute; left: 315px; top: 3363px; } #img18 { position: absolute; left: 279px; top: 3539px; } #img19 { position: absolute; left: 97px; top: 3621px; } #img20 { position: absolute; left: -7px; top: 3906px; } </style> </head> <body class="simple-demo"> <div id="content-wrapper"> <div id="examples-1"> <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" /> <img alt="img3" id="img3" src="img3.png" /> <img alt="img4" id="img4" src=img4.png width="544" height="426" /> <img alt="img7" id="img7" src="img7.png" width="528" height="425" /> <img alt="img2" id="img2" src="img2.png" width="733" height="313" /> <img alt="img5" id="img5" src="img5.png" width="420" height="256" /> <img alt="img6" id="img6" src="img6.png" width="565" height="442" /> <img alt="img8" id="img8" src="img8.png" width="733" height="238" /> <img alt="img9" id="img9" src="img9.png" width="563" height="229" /> <img alt="img10" id="img10" src="img10.png" width="412" height="71" /> <img alt="img11" id="img11" src="img11.png" width="452" height="388" /> <img alt="img12" id="img12" src="img12.png" width="371" height="210" /> <img alt="img13" id="img13" src="img13.png" width="984" height="336" /> <img alt="img14" id="img14" src="img14.png" width="791" height="342" /> <img alt="img15" id="img15" src="img15.png" width="652" height="227" /> <img alt="img16" id="img16" src="img16.png" width="475" height="374" /> <img alt="img17" id="img17" src="img17.png" width="361" height="187" /> <img alt="img18" id="img18" src="img18.png" width="457" height="87" /> <img alt="img19" id="img19" src="img19.png" width="779" height="275" /> <img alt="img20" id="img20" src="img20.png" width="1139" height="332" /> </div> </div> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { // This example adds a duration to the tweens so they are synced to the scroll position var controller = $.superscrollorama(); // amount of scrolling over which the tween takes place (in pixels) var scrollDuration = 200; // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration); }); </script> </body> </html>
  10. Hi, i wounder how to fade all elements in a timeline. I can't introduce a new extra container - which would be easy to fad - cause of several zIndexes used for the elements. Can someone give me a hint? Jan
  11. Hi, I'm new to TweenMax and was trying to achieve the following: I have a movieclip that move from left to right. What I want is that during the animation, to have a blur effect that kind of "fade in" and "fade out" on the beginning and end of the animation. Right now I'm able to blur my mc but I have problem with the "fade" parts. TweenMax.to(row_1, 8, { x:String(newX), blurFilter:{ blurX:40, remove:true } }); Can someone help me figuring out how to fade the blur effect with a sample or a tutorial. Thanks alot
  12. azuki

    mouseover animation

    hi all, After a good search in this forum, I'm surprised to find that I'm the first one to ask this question... unless my search skills have gone sour... Is there a really simple way to create a mouseover animation using GSAP? I'm not super familiar with javascript/jquery so this would be my first attempt at going this route to create a rollover event. Usually, I create all of my button animations in CSS but I have a very specific animation in mind that I can't do in CSS: on mouseover, the image simply fades out - not fading back in on mouseout. Basically, I just want the img/btn/whatever to fade out with the smooth easing of Greensock on a mouseover. Any tips? Sorry if this has been asked before!