connorv

Because of the way this uses cookies I'm not sure if this will translate well into the codepen, but I tried my best. You can see the page itself at https://chloeoneohone.myshopify.com/ with password paklus. Basically what's going on is I have a div with id="overlay-wrap". This goes over the entire width & height of the page, absolutely positioned, top:0, left:0;. Then i have this script that checks for cookies: window.onload = function () { if (document.cookie.indexOf("visited=") >= 0) { // They've been here before. So add hider class document.getElementById('overlay-wrap').className += 'hider'; } else { // set a new cookie expiry = new Date(); expiry.setTime(expiry.getTime()+(10*60*1000)); // Ten minutes // Date()'s toGMTSting() method will format the date correctly for a cookie document.cookie = "visited=yes; expires=" + expiry.toGMTString(); var d = document.getElementById("xyz"); d.className += " no-freedom"; } }; so what this is doing is checking to see if there's a cookie value already stored for "visited=". if there is any at all, it hides the class '.hider' to element #overlay-wrap. .hider simply has 'display: none' .hider { display: none; } so the whole point of this is to only show that overlay when a user HASN'T visited the page. The problem is that the script doesn't run fast enough - because it's initially set to show, the 'overlay-wrap' will briefly appear while the page is loading & then vanish once the script verifies that the cookie is in place. To correct this I've tried the inverse - by default hiding the 'overlay-wrap' then using a '.show' class that sets display: block. I have the opposite problem with this method, the page will briefly show the content (that the goal is to have hidden behind the overlay-wrap) during page load. Of course the overlay-wrap is eventually shown after the script sees there is no cookie set, but ideally I don't have any page flashing. as you can probably tell, i'm kind of new to GSAP, so i'm not confident that there's a better method to do what i'm wanting..

So, if you check out my codepen, you'll see the 'contact' area in the lower right hand corner. The end goal is to make it so that if you click on contact, it will reveal an email address, which after 5 seconds will disappear. I am able to get it to appear nicely with TweenMax by setting it's autoAlpha to 0 then 1 once element with id="contact" is clicked. So I have this working all through a timeline, or at least that's what I'm trying to do. I also have a function I called "InitialState" which I also have set as a timeline animation, and my plan for that is to call it when specific buttons are pressed or after 5 seconds or so goes by. I read a bit about the 'onComplete' event, so my idea was to call InitialState using onComplete and some kind of delayed timer (In my example I haven't even started on the delay ye). My first question is, is this a smart way to do this? Should InitialState really be a timeline? Second of all, why doesn't InitialState ever get called? In console I can see that it says it isn't a function, but I don't understand this because I'm defining it with var the same way I did with my other animation function. Obviously I'm a little confused on a couple things here - any help would be really appreciated. Can't wait to master GSAP someday.

you were right, the closing transition was occurring after the animation instead of before, and I don't think I would have figured it out if you hadn't said something. Thanks!

Hi Carl, thanks for taking the time. I included the full JS as for my use case I also require that the elements move while this fade out is occurring (this part of the animation works just fine). As this sort of stuff is still quite overwhelming to me, I wanted to keep that functionality there while I was working on it as I'm basically afraid of not being able to put it back together the same way if I take it all apart, or that the code won't behave the same with the full code. I'm sorry it's so much, but I hope you understand what I mean. I agree the code is very convoluted, part of the problem is I'm having trouble wrapping my ahead around all the nested functions etc myself.

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.

Actually I just got it! I needed to have wrapper in place of $window so that it moved the wrapper rather than (I guess?) trying to move the entire screen. So now I have one last issue - for whatever reason you can click a link that the script has already scrolled onto & offsets some more, to a seemingly random(?) slide. I'm not sure why this is - I would think that it would just try to go to the anchor it's already at which should do nothing. Can someone explain why this is?

Hi! I'm not sure why this scrolling isn't smooth. Here's the script in the CodePen: $(function(){ var wrapper = $("#wrapper"), $menu = $("#menu"), $window = $('.whole-wrap'); $menu.on("click","a", function(){ var $this = $('.whole-wrap'), href = $this.attr("href"), topX = $(href).offset().left; TweenMax.to(wrapper, 10000, { scrollTo:{ x: topX, autoKill: true }, ease:Power3.easeOut }); return false; }); }); So specifically the 'whole-wrap' on the 6th line should scroll smooth I think, but I am new to GSAP so I'm not sure exactly what I'm doing wrong..