Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About nevanthegreat

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hey Zach. At first I was having trouble searching. I went through several pages of the forums, but didn't find anything at first...until I found this: This looks like exactly what I want Also big shout out to the author who released this before GSAP 3 and updated post launch. For anyone else reading this looks like a good project to pick apart and learn more GSAP in creating a slider. Hopefully you find this helps you in your quest in creating your perfect very own GSAP slider.
  2. Hey everybody! I have a cool headstart on a timeline I created. I was looking into how I might go about turning this into a slider with controls that detect which slide they are on. Does anyone know of an example or starting point you can point me to? I did some reading in the forums, but it would appear that there's not a whole lot on this topic. Thank you!
  3. Hey Zach sorry to bug you again. My goal with this is to make it into a slider with progress dots and caret's etc etc. I am wondering what's the proper way to attach multiple elements to the progress (much like the icons tray). Such that as the tray slides up, the caret's slide in and the dots slide down. I was trying to attach the tweens to the if statement you set up like this: onUpdate: self => { console.log(self.progress) if(self.progress > 0.8) { treyAnim.play(); caretAnimLeft.play(); } else { treyAnim.reverse(); caretAnimLeft.reverse(); } }
  4. THANK YOU SO MUCH ZACH!! This is EXACTLY what I need. This is going to be my finest work of art when it's done. I can't wait to share it with you guys.
  5. Hello Club Green Sock! I was reading about the common Scroll Trigger mistakes looking for a solution to this question. I think may be going about this the wrong way, but... I have a timeline let hardwareTimeLine = gsap.timeline({ scrollTrigger: { trigger: ".centering-container", scrub: true, pin: true, pinSpacing: true, start: "top", end: "150%" } }); hardwareTimeLine .from(".hero-header", {}) .fromTo(".animated-header", {autoAlpha: 1, top: "29%"},
  6. I see what you mean. That seemed to work nicely. Had to adjust some other things about it too, but that seemed to work out pretty well. Thanks a lot Zach!
  7. Thank you Zach. Good points. This also worked for me and I think I am understanding this better now. I was just doing the inline styles for some example sections, but I definitely will not do that in the finished product. I wanted to continue an earlier question concerning the chrome bug. I tried messing with the overflows and that didn't seem to work. I was reading https://stackoverflow.com/questions/13628832/chrome-rendering-bug about the box-sizing property and that didn't seem to work either... Any other ideas? Should I start a new thread?
  8. Thank you so much Zach! I had no idea that needed to be at the end. That seemed to work perfectly. I've since updated my pin and I think I have the tween down on "Lorem Ipsum" (in the hardware container) to work right. I tried to attach it to the hardware timeline so that it is based off of that scroll trigger, but I think I may be doing it wrong because it happens so fast. Any tips for this part?
  9. @ZachSaucier Hey Zach thank you for your thoughtful reply. Sorry for putting so much into one...so let me just start with one. So for #3, I tried turning on the markers and setting the start to the one you suggested and it still seems like the pinspacing on both my timelines is messing it up still. I see where the markers come up on the document and it's like the pinspacing isn't playing nice with those particular elements. Am I overcomplicating this? Is it maybe because I need to put the ScrollTrigger in the timeline instead of in it's own method? I apologi
  10. Hey Club Greensock! I was just wondering if I could get some assistance on my project. I have a pretty good base (I think). I just had a couple questions and was wondering if someone might be able to give me some ideas and direction. In my pinned timeline, I have a container that I scale down. I am wondering how might one go about how to decrease the pin spacing as this timeline progresses? As you can see in the image, there is a huge gap due to the scale down. Is there a way to adjust the pinspacing so the final resting place of the animation obeys the global default
  11. @ZachSaucier Thank you so much Zach. This is awesome! I'm definitely going to share my project with you guys when it's done.
  12. One thing I am having trouble understanding is the position paramater and duration in context to when the timeline is attached to the scroll. It doesn't behave like a normal tween does and things get really weird. I haven't seen any demo's here on that, I was wondering if someone might have something that explains it a little more? For example...on my scroll trigger timeline I have a duration of 2 on each element, but when I scroll through the timeline you can barely see them as they zip by. Is there a conversion from seconds to scroll or something like that?
  13. Thank you so much Saucy Zach!! Check out what I came up with (I updated it). Thanks for showing me the shorthand property too. I've also updated that. Now I am wondering if you could point me in the right direction of accessing that entire timeline (or maybe each element) to fade it out and to fade in another element? Does that make sense? Would something like this: https://greensock.com/docs/v3/GSAP/gsap.effects be in the right direction?
  14. Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just p