Jump to content

Search the Community

Showing results for tags 'Opacity'.

  • 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


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


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



  1. Hi. Acording to design of site I must to make split screen with left side scrolling text and with right side pinned images, which change acording to text. But this is must be in the frame like on the added image. I tried to find examples. I found on of them simmilar to my design, but cant resolved two problems: 1. How to do change images with transition of opacity 2. How to make this work in a frame with red border I will be gratefull for any help!
  2. Hello everyone, I'm seeking to create an opacity transition effect that changes from 0 to 1 as soon as a section enters the viewport and becomes pinned. During this time, the opacity of the current section should transition from 0 to 1. After the pinned section's scrolling progress is complete and it is unpinned, I aim to have the opacity of the section transition from 1 to 0 while the section is being unpinned and until it moves out of the viewport. Despite attempting various approaches, I have been unable to find a successful solution. Any assistance and guidance would be immensely appreciated.
  3. I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message animation: useIsomorphicLayoutEffect(() => { if (!width) return; if (width >= 1200) { const changeOpacity = (props: ChangeOpacity) => { const { variant = "increase", selector, start = "+=75", end = `+=${window.innerHeight}`, } = props; if (variant === "increase") { return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: (self) => { const progress = self.progress; gsap.to(selector, { opacity: progress * 2, duration: 0, }); }, }, } ); } return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: () => { gsap.to(selector, { opacity: 0, duration: 0, }); }, }, } ); }; const ctx = gsap.context(() => { changeOpacity({ selector: ".first-panel", start: `+=75`, }); changeOpacity({ variant: "decrease", selector: ".first-panel", start: `+=${75 + window.innerHeight + 75}`, }); changeOpacity({ selector: ".second-panel", start: `+=${window.innerHeight}`, }); changeOpacity({ variant: "decrease", selector: ".second-panel", start: `+=${window.innerHeight * 2}`, }); changeOpacity({ selector: ".third-panel", start: `+=${window.innerHeight * 2 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".third-panel", start: `+=${window.innerHeight * 3}`, }); changeOpacity({ selector: ".fourth-panel", start: `+=${window.innerHeight * 3 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fourth-panel", start: `+=${window.innerHeight * 4}`, }); changeOpacity({ selector: ".fifth-panel", start: `+=${window.innerHeight * 4 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fifth-panel", start: `+=${window.innerHeight * 5}`, }); changeOpacity({ selector: ".sixth-panel", start: `+=${window.innerHeight * 5 + 75}`, }); }, contextRef); return () => ctx.revert(); } }, [width, contextRef]); codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw problem: must be like this :
  4. Hi devs, I'm trying to achive this animation using GSAP: As you can see the text is already present but the animation take place with opacity while scrolling. Thanks all!
  5. Hello, I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demo: https://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP! Looking forward to some help from the community. Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are: I have also attached a screen recording of what I've come up with till now
  6. What I'm trying to do? I've got 2 images on top of each other I want to alpha-in (opacity) via the blend-mix-mode layer with ScrollTrigger. position: relative; height: 100vh; width: 100vw; overflow-y: scroll; } img { min-width: 100vw; max-width: 100vw; height: 200vh; position: absolute; object-fit: cover; &#imageOne{ overflow-y: scroll; } &#imageTwo { overflow-y: scroll; mix-blend-mode: multiply; } } I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on. What I've come up with: So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work. Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js Thanks P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! All the best
  7. Hey! So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker gets past the center. My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets past it? I hope my question was clear
  8. GreenSock


    With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Because animating DOM elements in the browser is so common, GSAP automatically checks to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, morphSVG, pixi, etc.) into that css object when the tween renders for the first time. We recommend using the more concise style that omits the css:{} object but be aware that either style is acceptable. Learn more in the CSSPlugin documentation.
  9. Hi there! I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work. So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again. Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out. When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete. You get the idea I hope. I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore. Am I just totally missing a point or am I making things difficult for myself? I would love to hear your ideas! ~ David
  10. Hello, I have a problem not related to GSAP, I don't find any solution, I asked on 3 forums (+stackoverflow) and didn't find any answer. I already used GSAP on my webpage for a small animation and I was wondering if it could help me with this problem or if it would be overkill to use GSAP (performance/ressources). I tried to document my problem on stackoverflow (if someone want to read more details) : https://stackoverflow.com/questions/57784926/why-using-opacity-or-an-absolute-position-ruin-my-transform-rotatey180deg I made a card that can rotate on Y when it's mouse hovered (everything with CSS). the problem is that when I use css to change the opacity (svg flag) or the position of an element (text in my situation) on the back of the card, the rotate animation is buggy and got a delay of +/-1sec to display the back of the card. /!\ the bug occur only once, the first time the rotateY is used; to do it again, you need to reload the page (F5). The bug only apear in Chrome (work perfectly on firefox). If I use GSAP to do the rotation instead of css, should it fix the problem or is the problem from chrome and would still be here with GSAP ? (what would be more logic using GSAP for the rotation on Y or for opacity/text position?) I made a codepen with the problem : https://codepen.io/Demky/pen/pozWZKM -> if you remove the css classes .bottom-right and .changeOpacity there is no more delay. As I said on stackoverflow, if you use the template from w3school and just add an opacity to an element from the back of their card (exemple .flip-card-back), it does the same delay problem so I don't think the error is from my code : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card What would you do in my situation ? I can't believe it's impossible to customise the back of a card that rotate ? I don't really know if I can post my question here but I don't know where to search a solution Let me know if something isn't clear. ---------------------- Edit : looking to test it with gsap to see if it work; found this thread, will try it soon ;
  11. I'm trying to make an animated map of sorts by having markers show up on google maps at a certain time/after a certain amount of time has passed. I've only found one other post on how to move a marker, but can't seem to "select" the marker to change the opacity. I've got it working with setTimeout, but I would like the ability to scrub the animation, which seems to be quite difficult/slow without GS given the number of points I'm trying to animate. I've included a codepen with 2 points. https://codepen.io/azhao/pen/rgvXJq The only thing I can think of doing is to create all the markers with initial opacity of 0 and then change the opacity of them in the order that I want. Due to the crowdedness, I want the markers to "disappear" after a couple of seconds. (in the example, I thought it'd be easier to start with opacity at 1 and fade to 0 to show that the markers do show up correctly). Is there an easier way to debug this? ie some way to tell if I'm even selecting the google maps marker with greensock? I'm not sure how to start to figure out what's not working
  12. hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. here's my js: var root = document.documentElement; var body = document.body; var pages = document.querySelectorAll(".page"); var tiles = document.querySelectorAll(".tile"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i]); } function addListeners(tile, page, menu) { tile.addEventListener("click", function() { animateHero(tile, page); }); page.addEventListener("click", function() { animateHero(page, tile); }); } function animateHero(fromHero, toHero) { var clone = fromHero.cloneNode(true); var from = calculatePosition(fromHero); var to = calculatePosition(toHero); TweenLite.set([fromHero, toHero], { visibility: "hidden" }); TweenLite.set(clone, { position: "absolute", margin: 0 }); TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); body.appendChild(clone); var style = { x: to.left - from.left, y: to.top - from.top, width: to.width, height: to.height, autoRound: false, ease: Power1.easeOut, onComplete: onComplete }; TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) function onComplete() { TweenLite.set(toHero, { visibility: "visible" }); body.removeChild(clone); TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); } } function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; } the part that is actually changing the opacity for the element i want is TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); and TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.
  13. Hello, I've discovered a problem when using an opacity animation to 0 along with an onComplete callback that removes the tweened element from the DOM. What essentially I'm experiencing is that the element fades a little bit and then suddenly disappears. Almost as if the onComplete fires before the element reaches 0 opacity. Click either of the top left buttons to demo. I've found a workaround to adds a timeout to the onComplete callback, delaying the removal of the tweened element by a multiple of the animation duration. Click either of the bottom left buttons to demo. Although the fade-out is smooth and looks right, the hack solution is not desirable. What can be possibly causing the element to "pop" off the page instead of appearing to fade all the way to 0 before onComplete fires Thanks, DouG
  14. In the attached CodePen, I'm struggling with the Ripple animation that starts on line 28. I want the ripples to start out at 0% opacity, fade in as they scale up, and then go back to 0% before the start of a new repetition cycle. I use the following before starting the timeline: TweenMax.set(".ripple", {opacity:0}); However it's obviously not part of the timeline itself, so it's not resetting the opacity before each cycle. This, at least I assume, is why I always see the ripples fixed at their original size after the initial sequence/repetition. I'm guessing I either need to specify this element's property somehow in the object that initializes with the new TimelineMax({repeat:-1}) on line 28, or make it part of the timeline at the end? I've also noticed strange behavior when I apply overlap values, such as "-=.3", at the end of blocks when that value is greater than the duration of the animation itself. But I don't think that's happening here, is it? Thanks for the help!
  15. There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?
  16. I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attribute after the transformation. The result is that the elements appear on the screen, then move 20 pixels to the right in sequence with no fade in. Some additional information: This bug appears in 1.19.1 only. I can switch back to TweenMax 1.19.0 and it won't appear, switch again to 1.19.1 and it will. So it's something that changed between this version and the last. I've tested in on Chrome and Firefox so it isn't just a single browser. While I've copied the basic situation in a Codepen, I cannot seem to reproduce the bug. There's a lot going on on this page, but no other modifications to this element take place before the Tween with the problem. I've tried adding every CSS attribute assigned to the real element to the Codepen element and I've reproduced the nested function/promise/function structure of the js, but I can't get the issue to appear. The attached pen does show the context, at least. If I set the debugger to break on attribute modification, in 1.19.0 it breaks first on the opacity part of CSSPlugin.js at line 2611. In 1.19.1 it breaks on the matrix portion of CSSPlugin.js at line 1722, skipping the opacity code entirely. If I try to modify only the opacity and not the position, it does nothing at all and no attributes are modified on that element. It's definitely only the opacity tween that's affected. Any thoughts on what has changed in 1.19.1 that could lead to opacity being skipped in a staggerFromTo under certain conditions? I'd prefer not to have to freeze Greensock updates on this project and stay with 1.19.0 for good, but I've spent more than a day on this and I still can't figure out what might be causing this deeply obscure problem.
  17. Hi. I have not been able to find a solution and was hoping someone could help. Basically, I am trying to fade in/out an svg during the animation. At start, I would like to have the opacity transition from 0 at 0 seconds to 1 at 5 seconds (or half way through) and then again transition to 0 at 10 seconds (or the end of the animation). I need this animation to repeat infinitely. How can I achieve this? var snow = $("#snowflake"); var tl = new TimelineMax();var bezierPath = [{ x: 5, y: 4 }, { x: -5, y: 8 }, { x: 5, y: 12 },{ x: -5, y: 16 }]; tl.add(TweenMax.set(snow,{autoAlpha:0}));tl.add(TweenMax.to(snow, 10, { bezier: { type: 'soft', values: bezierPath, smoothOrigin: true, timeResolution: 12, autoAlpha:1 }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));
  18. Hello, My coworker made this animation prototype: http://animation.addlab.it/ledbyled/index.html However, after a good amount of analysis, it seems like chrome's MSAA rasterization is causing an heavy framerate drop. When MSAA is disabled (chrome://flags/#gpu-rasterization-msaa-sample-count set to 0), the frame rate is around 50fps, but when MSAA is enabled (as it is by default) it drops to 10fps (the exact rate depends on how big is the screen). Doing a trace on the timeline, the bottleneck seems to be on the composite layer: with MSAA it takes more than 200ms, while it's 9ms when disabled! Honestly we don't have a clue on how to solve this and clearly we can't say to our users to disable MSAA... Is there any known work around? I tried the `will-change` CSS property, but nothing changed. Thanks! PS: if you want to rerun the animation without reloading the page, just run `init()` in the console.
  19. Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?
  20. Hi, guys! I'm new to JS and GSAP and need some help. I'm trying to make quite a simple thing: hide login form with opacity transition. But if you make it like this: TweenMax.to(".plate", .3, {opacity: 0}); ...it just makes the form window transparent, but not hide it — you still can roll mouse over "close" button and over the input field and see how the cursor changes the shape. I have to set display: none; property after the animation is finished. And when I do it like this, the animation doesn't work: TweenMax.to(".plate", .3, { opacity: 0, onComplete: function() { TweenMax.set("."+type, {display:none}); } }); On top of that, the browser detects this JS as it has a syntax mistake, because when I load HTML page none of JS works on the page. Maybe I'm doing something wrong? Please, help to solve the issue. P.S. Is there any forum search? Couldn't find "search on the forum" button.
  21. Hey guys, I was wondering, is it possible to tween the body background image? I know you can on other divs (or I guess more precisely you tween the whole dom element) but with the body everything seems to tween BUT the background image. I've tried both opacity and autoAlpha, and any dom elements within the body tween fine, but the background image is visible on load. Any way to do this? If not, no biggy. I just wanted to keep my code cleaner and avoid having a fullscreen img tag hanging around in my HTML.
  22. Hi! So, here's the link http://goncalo.eu/movies The idea is to create a realistic film projection experience. I'm playing with the opacity of the black overlay, but doesn't feel real. Far from it. Currently, i'm doing this: var tlOpacity = new TimelineMax({repeat: -1, yoyo: true}); tlOpacity .to(".overlay", 3, { opacity: 0.7, scale: 0.95, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }) .to(".overlay", 3, { opacity: 0.8, scale: 1, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }); I've tried several other alternatives, trying to oscillate the opacity value, but with no success. So, I'm trying the GSAP boards for some counselling. Do you have a better idea on how to proceed? Thanks in advance!
  23. Guest

    Opacity Not Working in IE8

    Hi , I am trying fade in fadeout animation using greensock I am using these funcitons for hiding and showing images TweenMax.to("#image_" + id, 2, { display: "block", opacity: 0.99, ease: Power4.easeOut }); TweenMax.to("#image_" + id, 2, { display: "none", opacity: 0 }); It is working in all browsers , but when it comes to IE8 after 2 seconds images are hiding but I opacity is not getting changed. I am using latest CSSPlugin available from green sock. Any help regarding this would be appreciated. Thanks in advance. This is not working in IE8 windows 7 machine http://codepen.io/jonathan/pen/iHdek.
  24. Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot! My HTML: <div class="section"> <h3>Section 1</h3> <p>There's some text and what not in this section.</p> <div class="editMenu"> <ul class="editList"> <li><a href="#">Edit</a></li> <li><a href="#">Remove</a></li> </ul> </div><!-- /editMenu --> </div><!-- /section --> My script: $(document).ready(function () { //hover over Section, make editMenu opacity = 1, scale = 1 //on mouseOut, make editMenu opacity = 1, scale = .7 $(".section").hover(function () { var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 1 } }); }, function(){ var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 0 } }); } ); }); The CSS I am somehow assuming is screwing things up: .editMenu{ position: absolute; top: 10px; right: 5px; opacity: 0; transform: scale(.7); } I'm assuming I'm missing something simple! Thank you for any help.
  25. I've got a list of items. Filters are clickable that hide all but the items in that category with a sequence that fade opacity and height to 0. When showing all, items currently at opacity and height 0, fade in correctly, but height "pops" in immediately. Am I missing something obvious here? Also, is there a more appropriate place to post than here? SO perhaps?