MacReady Posted August 17, 2022 Share Posted August 17, 2022 Hi All, I am a complete novice when it comes to GSAP. I've been reading through the various documentation and watched a couple of videos. I'd like to know how I could activate an animation as soon as the mouse or scroll wheel is moved. I'm using the following code to animate six images. It works when the trigger point hits the top of the view port, I don't want that to happen I want the animation to commence as soon as the mouse/scroll wheel is moved. let tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: ".container", pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: "+=500", // end after scrolling 500px beyond the start scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar snap: { snapTo: "labels", // snap to the closest label in the timeline duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping ease: "power1.inOut" // the ease of the snap animation ("power3" by default) } } }); // add animations and labels to the timeline tl.addLabel("start") .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0}) .addLabel("color") .from(".box", {backgroundColor: "#28a92b"}) .addLabel("spin") .to(".box", {rotation: 360}) .addLabel("end"); Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 Heya! Hard to tell without a demo. (we really really love demos around here) It may be that you just want to trigger scrollTrigger right at the top of the page? let tl = gsap.timeline({ scrollTrigger: { start: 0, // start right at the top of the page (starting as soon as the user scrolls) end: "+=500", // end after scrolling 500px beyond the start } }); tl .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0}) .from(".box", {backgroundColor: "#28a92b"}) .to(".box", {rotation: 360}) But I think it's more likely that you're not after ScrollTrigger and actually want to listen for events. https://greensock.com/docs/v3/Plugins/Observer Link to comment Share on other sites More sharing options...
MacReady Posted August 17, 2022 Author Share Posted August 17, 2022 Hi there, I found a great example of what I want to achieve below (check out the mobile phones and the way they animate): https://www.mwb-agency.com/ Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 Ok sure, so that's scrollTriggered animation. Just like my snippet above. Where it starts and ends is entirely up to you. You just need to position the triggers at that point. Have you watched the ScrollTrigger video? Introducing ScrollTrigger for GSAP from GreenSock on Vimeo. Link to comment Share on other sites More sharing options...
MacReady Posted August 17, 2022 Author Share Posted August 17, 2022 Great thanks for the advice. Although I want my animation to start as soon as the mouse wheel is activated. BTW setting the start position to '0' doesn't change the behaviour the image is pinned and the animation only triggers when it hits the top of the viewport. I will set up a CodePen later on. Thanks for your help though much appreciated. Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 If you're just talking about the same as the demo you linked to - then that's exactly what my code snippet would do. - like so See the Pen BarvoyZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 Sounds like you probably just need to separate out the animation scrollTrigger and the pinning. Two scrollTriggers with different start triggers. Demos are always helpful. I'll check back in later Link to comment Share on other sites More sharing options...
MacReady Posted August 17, 2022 Author Share Posted August 17, 2022 Indeed. Sorry I'm at work at the moment. Also toggleActions doesn't seem to work animation plays without reversing. let tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { start: 0, // when the top of the trigger hits the top of the viewport end: "+=500", // end after scrolling 500px beyond the start toggleActions: "restart pause reverse pause", } }); Link to comment Share on other sites More sharing options...
MacReady Posted August 17, 2022 Author Share Posted August 17, 2022 6 minutes ago, Cassie said: If you're just talking about the same as the demo you linked to - then that's exactly what my code snippet would do. - like so Similar but the images actually fade out and at different angles. I'll have a play Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 toggleActions and scrub can't be used together - Give the ScrollTrigger video a watch and pop a demo in the thread with a clear question if you need more help. Thank you! Link to comment Share on other sites More sharing options...
MacReady Posted August 17, 2022 Author Share Posted August 17, 2022 Ok thanks although the website I linked to is the effect I'm trying to achieve, I can't really provide a CodePen because I don't know how to achieve the effect. Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 So you'll want to start by building the animation. Just focus on that. Then you can hook it up to scrollTrigger. Here's a good place to start. Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 By a 'minimal demo' we just mean, 'set it up for us and give it a go' Just some simple coloured boxes in a codepen will give us something to work with alongside you. 1 Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 Okey dokey. I'll set up a simple CodePen but I will try to achieve the effect and post my results. Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 I've set up a very basic CodePen. As mentioned previously I would like the elements to fade in and out on scroll and animate as per the example below. https://www.mwb-agency.com/ See the Pen XWEoqmm by MacCready (@MacCready) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted August 18, 2022 Solution Share Posted August 18, 2022 @MacReady it would had been nice if you tried your hand at any possible solution. I find that learning something is done by getting your hands dirty and not by having others give you the solution. Next to that if you try something and show what your thought process is others can point out where you went wrong or show you a better way. Here is a basic animation. Right now they randomly rotate between -100 deg and 100deg and they move left or right also between -100 and 100. You could of course change these values or have each box animate a specific amount, you could use the wrap function for that https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() and feed in the index of each element. let yourWrap = gsap.utils.wrap(["-5", "100", "200"]); rotate: index => yourWrap(index) See the Pen gOeZKbN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 I did actually have a go last night I spent roughly three hours trying to achieve the effect so I'm not here to expect others to do the work for me and I'm something of a novice when it comes to website animations. Thanks for the advice. Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 18, 2022 Share Posted August 18, 2022 @MacReady then please share your code, this makes it much easier for us to help you and get you even better feedback! 2 Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 It was actually done on a live staging site. Not the cleanest of code I have to say! I'm working my way through the various videos and documentation. The penny's beginning to drop Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 I'm trying to make learning a bit easier and three hours for no result after watching various videos and reading docs sounds like an absolute disaster. If you could share your stumbling points it would be really helpful/what have you watched/what were you struggling with? Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 I wouldn't call it a disaster I'm a complete novice and three hours included watching tutorials and trying out various other solutions. All part of the learning curve. The biggest hurdle was triggering individual elements so they rotate at different angles. I'll post my efforts later on this evening. 1 Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 1 hour ago, mvaneijgen said: @MacReady it would had been nice if you tried your hand at any possible solution. I find that learning something is done by getting your hands dirty and not by having others give you the solution. Next to that if you try something and show what your thought process is others can point out where you went wrong or show you a better way. Here is a basic animation. Right now they randomly rotate between -100 deg and 100deg and they move left or right also between -100 and 100. You could of course change these values or have each box animate a specific amount, you could use the wrap function for that https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() and feed in the index of each element. let yourWrap = gsap.utils.wrap(["-5", "100", "200"]); rotate: index => yourWrap(index) I am not understanding the wrap method. How do I target individual elements so they have specific rotational values applied on scroll? Do I pass the four boxes in as an array? Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 18, 2022 Share Posted August 18, 2022 @MacReady you can give the wrap function values you like to use let wrapper = gsap.utils.wrap(["rotation value box1", "rotation value box2", "rotation value box3", ... ect ]); (the wrap function is nice, because if in the future you have more boxes it will automatically wrap to the frist item again, but you can also just use an array) and you then call like so rotate: index => wrapper(index), But if it is not working for you please post your demo and will point you in the right direction 2 Link to comment Share on other sites More sharing options...
MacReady Posted August 18, 2022 Author Share Posted August 18, 2022 Ah I see now! Thank you for your help it is much appreciated. I will post my version I came up with last night. Please try not to laugh😀 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 No laughing here! We love seeing what people come up with 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now