nevanthegreat

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.

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!

This is dope af

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(); } } const treyAnim = gsap.from(".icons-tray", { y: 50, autoAlpha: 0, paused: true }); const caretAnimLeft = gsap.from([caret-class], { x: 50, autoAlpha: 0, paused: true}); It's definitely not the right way to do it because it causes some whacky things to happen Can you point me in the right direction for this effect?

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.

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%"}, {autoAlpha: 0, top: "27%"}) .fromTo(".scaling-container", {duration: 1, scaleX: 1.6, scaleY: 1.6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, {duration: 1, scaleX: .6, scaleY: .6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, "<") .fromTo(".screen-inner-1", {duration: .5, transform: "translateX(0)"}, {duration: .5, transform: "translateX(-103%)"}) .fromTo(".screen-inner-2", {duration: .5, transform: "translateX(103%)"}, {duration: .5, transform: "translateX(0)"}, "<") .from(".icons-tray", {y: 150, autoAlpha: 0}); and I was wondering if there was a way to put a tween inside the timeline that is attached to the Scroll Trigger at the very end of my last ".from", if that makes sense? I tried .tweenTo() but that didn't seem to give the effect I am searching for. For example (see my codepen, you may need to look it at on full screen) I would like the grey box (".icons-tray") to tween up on it's own and only be started by the scroll trigger. Can anyone point me in the right direction of the way to approach this effect or have a working demo that shows this? Thank you so much!!!

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!

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?

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?

@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 apologize I am a complete noob.

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 defaults I have setup for the section container? If that makes sense? Specifically if you look at my pen on chrome, there is a weird thing it's doing where there's like a slight margin that is revealing the background slide as it moves. It doesn't do this on FF. Tell me if there is a better way to do this, but basically I have the laptop as a png, the screen area is the transparency, and I have a white bg on the sides of the screen image (to hide the slides) and then I did an overflow: hidden on that laptop png. I know there's got to be a better, more flexible way of doing this. Any suggestions? I would like to setup a global tween (".reveal-up") that I can apply to be flexible to many elements on the page (sort of how like green sock does it here). I have it setup on the header and text in the section with the boxes that rotate and "fly-in". It plays, but it doesn't play when in view, rather it plays at the top of the page. How can I approach this to be more flexible so it plays when in view and also be able to apply it to other elements? Tweening inside my scroll trigger timeline. Specifically I am talking about the text "Lorem Ipsum" that is layerd above the laptop. I know how to make it part of the scroll, but is there a way to trigger it on scroll, but not to play with the scroll? If that makes sense. How would one go about triggering it on scroll, but to play through regardless of the users inputs on the scroll and additionally to reset? I am not sure if this is a thing, but when the browser resizes, there's some funkiness that happens to the timelines. Is there a way that I can make it more flexible on browser resize so the funkiness doesn't happen? Thank you for any help. Here's a couple images to assist in my questions:

@ZachSaucier Thank you so much Zach. This is awesome! I'm definitely going to share my project with you guys when it's done.

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?

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?

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 plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.