D.Cus Posted February 10, 2021 Share Posted February 10, 2021 Trying to create an effect of moving across a canvas or journey however I need the to tie each movement function into some sort of scroll snap however I can't seem to work out how to create this. Heres a pen with the effect and current function I have, any help with this would be great: Thanks in advance See the Pen gOLwQNq by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 Hey D.Cus. This sound like a great use case for ScrollTrigger. The docs and demos section should be able to get you started. You might also like this demo by @mikel: See the Pen qBqEeMj by mikeK (@mikeK) on CodePen 2 Link to comment Share on other sites More sharing options...
D.Cus Posted February 11, 2021 Author Share Posted February 11, 2021 I have looked over the scrollTrigger docs but can't seem understand how to apply this to what I am trying to achieve. Also a lot of the examples shown tend to scrub things where as I am trying to snap to each focus point. I have added some refinement to my pen it is almost like I need to run something like this: gsap.to($focus, { scrollTrigger: { trigger: $canvas, snap: { snapTo: $focus, } } }); but that does nothing to my pen so still struggling to get this working, what I am doing wrong? See the Pen PobbNKW?editors=1010 by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 11, 2021 Share Posted February 11, 2021 Hey @D.Cus, Even if I can't really imagine the effect in your scenario, here is an example with snap to the closest label. See the Pen GRNNqQd?editors=1010 by mikeK (@mikeK) on CodePen Happy snapping ... Mikel 1 Link to comment Share on other sites More sharing options...
D.Cus Posted February 11, 2021 Author Share Posted February 11, 2021 Thanks for the help so far. I think this a small step in the right direction however, the effect I am looking for is to snap to the closest focus (i.e .focus centralised) point triggered on scroll up or scroll down while in the $canvas . I have tried something like this but it does nothing to my pen. Although I think setting the labels at the start of the foreach is correct. var tl = gsap.timeline({ defaults: { duration: 2, ease: "power4.inOut" }, scrollTrigger: { trigger: $canvas, snap: "labels" // I added this cause I want to snap to each of the labels set below } }); $focus.each(function (i) { tl.addLabel("focus" + i) .to($(window), { scrollTo: { y: focusObj[i].y } }) .to($canvas, { x: focusObj[i].x }, "focus" + i); }); Also I would have thought adding the scrollTrigger into my timeline would have stopped the automatic triggering of the animation but it still automatically plays See the Pen PobbNKW?editors=1010 by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
D.Cus Posted February 11, 2021 Author Share Posted February 11, 2021 Most of the way there, looked at the panel example on here ad based the logic around that, id there any way I can make this a bit more smooth seems a little glitchy? See the Pen KKNNWVd by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 11, 2021 Share Posted February 11, 2021 1 hour ago, D.Cus said: I would have thought adding the scrollTrigger into my timeline would have stopped the automatic triggering of the animation but it still automatically plays That's because by default a ScrollTrigger will play the entire timeline. If you use a scrub then it will pair the progress of the timeline to the scroll position. Another part of the issue is the start and end positions of your ScrollTrigger. By default they are start: "top bottom" and end: "bottom top" which is not what you want in this situation. I highly recommend that you go through the ScrollTrigger documentation and video thoroughly as getting a better understanding of how ScrollTrigger works will make your development process a lot easier and faster The last issue is the fact that you have a scrollTo part of your timeline. That doesn't make much sense because both those tweens and the ScrollTrigger will try to control the scroll position. That's no good Instead, since you're using scrub, you should just place the label and tween at the correct ratio (progress) of where it needs to be. So if your second section is 1/4 of the way down your canvas, you need to make sure the label for that section is at the 1/4th progress point of the total timeline duration. For more information, check out the relevant section of the ScrollTrigger docs. The basic concept is: Create your timeline as you need it to be (animating between each section as you'd like but not actually affecting the scroll position, with labels at each stopping point including the start and end if necessary), then attach it to a ScrollTrigger with the correct trigger, start, end, and scrub values to create the effect that you need. Here's a basic demo that does not have custom positions of each section in the timeline: See the Pen OJbbmKO?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
D.Cus Posted February 17, 2021 Author Share Posted February 17, 2021 Ok @ZachSaucier & @mikel with help on this post I have managed to do this... See the Pen OJbmaZp?editors=1010 by darren-ignition (@darren-ignition) on CodePen However I think my approach to this is wrong as I want the behaviour to instantly snap to next or previous label. I think the usability will be an issue if the user scrolls don slightly and it the movement just snaps back or if the user scrolls too much and then just get taken to the end missing all the text. Is that any way to integrate my animation into the method used on this in this pen : See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 In that case I would recommend ditching ScrollTrigger and just hooking into the relevant events (especially the wheel event). Then animate the progress of your timeline using .tweenTo() as needed. 1 Link to comment Share on other sites More sharing options...
mikel Posted February 18, 2021 Share Posted February 18, 2021 Hey ZACH, I'm still working on your recommendation - I haven't found the right way yet. Here snaps the CSS and some highlights by GSAp ScrollTrigger: See the Pen BaQKMoJ by mikeK (@mikeK) on CodePen Happy snapping ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2021 Share Posted February 18, 2021 I meant something like this: See the Pen rNWwmOe?editors=0010 by GreenSock (@GreenSock) on CodePen I strongly suggest adding support for other types of navigation as not everyone uses or even has a mouse wheel. But that's the basic concept. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 20, 2021 Share Posted February 20, 2021 Hey Zach, It took me some gray hair, but here's the experiment. See the Pen rNWzGaa by mikeK (@mikeK) on CodePen Thanks for your example. Happy tweening ... Mikel 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