Jump to content

Search the Community

Showing results for tags 'fade'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 18 results

  1. Hi, I'm having trouble getting the animation to repeat smoothly thanks.
  2. Hi there! I would like to have a pinned section with images on my page. Using scrolltrigger they should fade in one after the other. If I have a mobile viewport and three images, all landscape but with slightly different ratios I want the container to be the height of the smallest image. The other two being too big, can be clipped with overflow: hidden. On landscape viewports max-height should be 100vh. I am struggling when and where to find out about the height of the smallest image and set it to the container. My thoughts so far: - I have to wait until the images are loaded (> window.onlad) otherwise clientHeight is 0 - If I use the container as trigger, I cannot change the height anymore - so I tried to include putting also the Scrolltrigger into the window.onload However this does not resize correctly when resizing from super landscape back to portrait viewport ... and above all I expect that this is not the best option at all Glad about your inputs! Thanks!
  3. 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
  4. Hi! I would like to know if a fade in effect between sections is possible with GSAP & ScrollTrigger while a section has more content and needs to be scrollable at the same time. With the help of the ScrollTrigger demos I was able to achieve the fade in effect, but I don't know how to keep this fade effect between sections while also being able to scroll the section with more content (in this case, section 2). I would really appreciate any help or hints as to where / what I should be looking for.
  5. Hello! I'm doing app which returns cards from JSON array and it also have pagination. I found source code for fade in animation from web which works like a charm. I'm wondering how to make animation also Fade out. I have pagination which has 10 cards per page and when I click next page cards should fade out and after that next cards should fade in. Any ideas? I don't think I need to attach anything else than fade animation component? Here's the code I found: const FadeAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 5; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay, }); }, [compRef, fadeDirection, delay]); return ( <Component ref={compRef} {...props}> {children} </Component> ); };
  6. Hello everyone, first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. I have a conceptual question and I have tried many ways to get it to work correctly but I realize I am barking up the wrong tree. I have a section that has 100vh height and is pinned. It starts "top top" and ends "+=400%". Inside this section I have 4 text layers. These are also 100vh height and 100vw width and absolutely top/left set to 0. All text layers have an opacity of 0. Everything starts with a blank red section and some firework animation. When reaching 50% (out of 400%) I want to have text layer 1 from opacity 0 reaching opacity 1. Starting from 50% to 100%, I want to begin hiding layer 1 and fade in layer 2. When 100% is reached, I want text layer 1 to be opacity 0 and text layer 2 to be opacity 1. I want the same to continue in increments of 50. So when 150% (out of 400%) is reached, text layer 2 should change from opacity 1 to 0 and likewise at the same time text layer 3 should change from opacity 0 to 1. Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course. The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed. Thanks! Regards Hirbod
  7. Hi, I’m new here and I’m trying to have a fixed header fade out upon scrolling down, with a button to have it fade in and out manually (if scrolled down). I’ve got the fade-on-scroll part working but I’m struggling with the fade toggle. I thought I would create some tweens and two independent timelines to which I add the tweens (with different timing in each timeline), and then I associate one timeline with ScrollTrigger and the other one will be executed on click of the button but somehow this doesn’t work. Note, I’m using this in combination with jQuery This is the code I have so far: var anim_header = gsap.timeline({ scrollTrigger: { trigger: $('body'), scrub: true, //markers: true, start:'top top', end: '+='+$('body > header').outerHeight()*1.75+'px' } }), toggle_header = gsap.timeline().pause(), fadeHeader = gsap.to($('body > header'), { opacity: 0 }); anim_header.add(fadeHeader); toggle_header.add(fadeHeader); toggleButton.click(function() { if(!$('html').hasClass('header_active')) { toggle_header.reverse().then(function() { $('html').addClass('header_active'); }); } else { toggle_header.play(); $('html').removeClass('nav_active'); } }); I thought I could just add the same tween to different timelines and they would work independently but apparently this isn’t working; it seems like one timeline overrides the other one.
  8. 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 : )
  9. 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
  10. 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++; }
  11. 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
  12. 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!
  13. 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!
  14. 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
  15. 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>
  16. 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
  17. 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
  18. 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!