Jump to content


  • Posts

  • Joined

  • Last visited

connorv's Achievements



  1. Cassie thanks again so much for your help! This little project is turning into something awesome. Here's an updated one where you can check out all the things I've done since, like added touch support, clickable navigation & a few more animations: https://codepen.io/connorv/pen/PopbvKM It's becoming so cool! But I'm now facing a different issues in my animations - there is a slight "wiggle" when the width are these are animated, you can see it for yourself by scrolling a bit. I've watered this down into a much simpler CodePen where you can see the issue w/o all the fluff here: https://codepen.io/connorv/pen/BaWXzPX So the way this works is I have this colored bar at the bottom that animates when 'next' or 'previous' is clicked, using the array you showed me here. There's one element on the left that always takes 10% of the space, and two others that combined take the rest of the 90%. When I first saw this happen I was just setting the middle one to always be 100% of the space. I figured this shakiness came from the containers being too big, so it did a bunch of math to try to get them to fit as it was animating. I've attempted to mitigate this by making the size always equal exactly 90% of these two containers - I do this by putting in scripts like this: if (i == 3) { TweenMax.to(".sw4", { width: "72%" }); where i is just the page number. So this fires when the direction is changed from a specific page - I also will have an inverse script that will set the width of the other element to 18%, so that it always equals an exact 90%. But I still see this shakiness on super specific transitions - like when animating from the first to the second page, but not from the second to the first. I don't know why this happens or where this inconsistency comes from when the math should be the exact same each time, but obviously something is consistently making it shaky on certain animations and not on others. Maybe my approach to this problem is bad? It's almost like the animations aren't firing at the exact time so there's some lag, causing the math to be off for a second but looking at my code I believe these should always fire at the same time. I'm pretty stumped on this - do you have any ideas?
  2. Hey Cassie, thanks so much for your help!! The way you have this set up is so clever. I've kind of taken what you had and expanded on it so that I can target individual ones too. I'm still quite new to javascript and still struggle with writing inadvertently repetitive code especially with gsap so i'm grateful to see how you've simplified what i had in a much more efficient way. Now i'm wondering if there's a way I can limit how many of these can run, such as forcing them to wait a half second after it's ran before it will fire that array again. I've been trying to implement an if isActive to just return;if one of these 'blocks' is animating and put that in some of animation functions as an attempt to just get it to stop if it's already animating (which still probably wouldn't be perfect) but even that I can't seem to get working. So at this point I already have the functions that will animate previous/next for the button presses.. But the reason I'm having this problem now is that I've tied this to scroll events using the wheeldelta stuff, with the goal of being able to navigate these by scrolling. And wheeldata is very sensitive so now these are firing every time the scroll wheel sends data at all, which is way too frequently for what I need and I'm not sure how to slow it down. I wanted to use scrollTrigger and keep everything within GSAP but for the way this animation works I don't think I can, as I think it uses scrollTop type stuff to measure 'scrolling', which this page doesn't do at all because it's a 100vh x 100vw container with overflow:hidden. I think a simple isActive will do what I need but I'm just missing something whenever I try to use it it seems like nothing happens, no matter what I try to target it with. I'm really banging my head against the wall on this one. You can see what I'm going for on the same CodePen, now updated and try to scroll: https://codepen.io/connorv/pen/ExWQzbQ
  3. It helps if you have the console open to see the output of my 'counter'.. I'd essentially like hitting next to add one to it and previous to subtract one. The goal is to have these be the actual 'pages' on the site, and every time you hit next/previous it will do this little animation to the next/previous set of content. Once the script loads if you click next and then previous (in that exact order) back and forth, you can see that it correctly counts which "page" you're on. The var that's storing this is called 'last' and there's a simple console.log to record what is stored after it's been added or subtracted. But if you hit next twice to get to 3, and then go back to 2 or 1, the count gets thrown off on the next button press. I can't figure out why, I have these adding and subtracting each time just like my first 2. From what I can tell the same GSAP code (function getFirst and function rewindFirst) should be firing once last is set to 2, so I'm really confused on this. I thought it would behave exactly as how my first ones did, because it uses those same values to determine where to essentially go, or maybe I'm misunderstanding how this functions? Sorry for this mess of a post, it's 1AM & I've been battling with this for hours.
  4. 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..
  5. 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.
  6. 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!
  7. 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.
  8. 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.
  9. 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?
  10. 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..