Search the Community
Showing results for tags 'visibilty'.
Found 2 results
-
Hello people, I'm calling to you for help. I'm new to gsap and with Scroll Trigger too. After playing around I see that's very easy to set and make animations to elements, and I know that maybe what I'm asking is very easy, but I can't find how to do it, I've been struggling for a few days... maybe I'm not clearly understand the tween to and fromTo methods. So, the thing is: I have a group of layers one above the other due the z-index property which I set on start: gsap.set(".transformation-layer", { zIndex: (i, target, targets) => targets.length - i, //backgroundColor: (i, target, targets) => `#${Math.floor(Math.random()*16777215).toString(16)}`, }); Please ignore the background, this is the property that I have conflict with. I have 5 layers, which the first one gets z-index:5, the second one z-index: 4 and so on... They're inside a wrapper wich is the one who triggers the animation: gsap.to(".transformation-layer:not(:last-child)", { yPercent: -90, opacity: 0, ease: Power3.easeOut, stagger: 0.5, scrollTrigger: { trigger: ".transformation-wrapper", start: "top top", end: "bottom 20%", markers: true, scrub: 1, pin: true }, }); So, right now every layer is visible because there is no background, and I need it to be like that. So my question is how I should put the visibility from 0(start) then 1(meanwhile scroll trigger acts) and then to 0(when the scroll of the layer ends). Or having this visibility: hidden in the css as a starter state. Then when I scroll to the layer it appears on the beginning and hiddens again on the end. Wanna know if I'm explaining myself correctly. Thanks in advance
-
Hi guys, I am having some IE problems and would like some support. In IE 7 and 8 the blue "panels" containing price and the text "Boek nu!" in the last frame shows through the whole animation. This works fine in Safari, GC, FF and so on, but not in IE 7 and 8. The only issue in Safari, GC and FF is that these panels show up for like a millisecond in the beginning of the sequence. I guess the both issues has anything to do with the css property "visibility", but I can't get it to work. Can someone please look at my animation and check for what could be wrong and what could fix this. This is the URL to my animation: http://marcusfriberg.com/greensock/ie-test/ Please look at it in Safari, FF, GC or newer IE to see what I want it to look like, except for that issue in the beginning where the panels show for a millisecond sometimes, and compare that to how it looks in IE 7 and 8. Please let me know if there is something that is unclear. Thanks for any kind of help! - Marcus
