Alphamark Posted February 19 Share Posted February 19 Hello, so I'm trying to recreate the effect on the footer on this website (https://www.fielddaysound.tv/project/nike-we-are-all-witnesses). I know I'm way off from their approach, but I wanted to make this with a different approach. So I've gotten to a point where everything works as expected but on the part where I'm resetting the scrollPercent to 0 and gsap.set the container to 0em there's like a jump/cut and I wanted to know, is there any way to continue the transition and not just jump to 0em. Also, can someone explain to me, how I can make this same animation play in a loop while being controlled with the "wheel" event at the same time? I appreciate any help you can provide. See the Pen ZEPPPQw by Bobiman (@Bobiman) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 19 Share Posted February 19 Hi, Maybe use the Horizontal Loop helper function and ScrollTrigger: See the Pen abMMrPM by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Alphamark Posted February 20 Author Share Posted February 20 @Rodrigo Hey, thanks for the reply. I've already tried using the Horizontal Loop helper function, but I can't seem to get It to work as I want. So the basic idea is the marquee sits on the bottom of my page. Looping automatically like a CSS keyframe marquee It can be scroll controllable When it's hovered — scrolling is disabled, marquee is disabled Just like the link to the website I've provided in the thread above. Can you somehow point me to how can i use the helper function to achieve the effect I need? Link to comment Share on other sites More sharing options...
GreenSock Posted February 21 Share Posted February 21 That's totally possible, but it's a bit beyond the scope of help we can provide in these free forums. The basic approach I'd personally take is to get the seamless looper helper function to create the timeline, pause it, and then create a baseline variable like "velocity" representing the speed of the playhead. Then, in a tick event handler (gsap.ticker.add(() => {...})) I'd update the timeline's playhead accordingly so that it moves at a normal pace (whatever you decide that to be). Then use an Observer to listen for scroll, pointer, and touch events such that it alters the velocity according to the deltaX/deltaY, and tween that value back to the baseline with a gsap.quickTo() so that it decelerates. So your velocity variable goes up and down based on the various events/interactions, but always goes back to the baseline. Good luck! We do offer paid consulting services if you need more assistance. You're welcome to post in the Jobs & Freelance forum too. 1 Link to comment Share on other sites More sharing options...
Alphamark Posted February 23 Author Share Posted February 23 Thank you both for the replies. So I've managed to get it close to what it should be working. Although I'm not sure if I'm on the right way. I can't figure out how to reset the velocity back to 0 with the gsap.quickTo() and smoothen out the deceleration. If you can help me out with that I'd be grateful. Here's link to my codepen: See the Pen VwRNbKR by Bobiman (@Bobiman) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 23 Solution Share Posted February 23 Hi, I would use the Observer Plugin instead of tacking on the window's wheel event, is far less complex: See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Alphamark Posted February 26 Author Share Posted February 26 @GreenSock @Rodrigo After experimenting with the code you've provided me with. I've managed to get exactly what I needed. Thank you both for the support and the time spent on my problem. 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