Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About connorv

  • Rank
  1. 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 hid
  2. 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 ca
  3. 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!
  4. 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
  5. 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 add
  6. 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?
  7. 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 sm