pietM Posted June 26, 2020 Share Posted June 26, 2020 Hi everyone, I'm looking for a simple expression for the enclosed marquee. I know this is a common question, but I haven't been able to find a reduced example in GSAP v3. I have a basic tween for reference. I appreciate your attention, as always, M See the Pen BajdWra by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 26, 2020 Share Posted June 26, 2020 Hey piet. This is indeed a common question Most recently answered here (another method in the same thread later on): 1 Link to comment Share on other sites More sharing options...
pietM Posted June 27, 2020 Author Share Posted June 27, 2020 Thanks, Zach! The examples are always helpful. But in linked examples, the individual cells have a fixed width. Is there an example with varying widths? I was able to achieve the the effect here, but I can't duplicate the animation for multiple uses on a single page. I've tried this with "document.querySelectorAll("ul").forEach(ticker => {" but it just aggregates all the elements into single "wrapper". See the Pen jOWLxdM by euqio (@euqio) on CodePen Appreciate any help here. Many thanks, M Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 27, 2020 Share Posted June 27, 2020 That's because your variables are not scoped to the ticker instance. Make sure that all of your selectors inside of the loop are scoped to that ticker. 1 Link to comment Share on other sites More sharing options...
pietM Posted July 4, 2020 Author Share Posted July 4, 2020 Thanks for this, Zach. As always, you're a great help. But, I'm still unable to get this to work. I've tried to scope the selectors to the "ticker" instance, but lost the draggable function and still can't multiply the ticker. This is a foundational animation, so I'm using it to better acquaint myself with GSAP's syntax. Thanks for all! See the Pen VweQayd by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 Hey Piet. It looks like the pen has been deleted now? Did you figure it out? 1 Link to comment Share on other sites More sharing options...
pietM Posted July 8, 2020 Author Share Posted July 8, 2020 Thanks for getting back, Zach. I really appreciate it. Unfortunately, no. I deleted the updated pen after tinkering without any luck. I've reproduced it here: See the Pen NWxMdpW by euqio (@euqio) on CodePen And would love to receive any help here. Thanks again for following up! Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 8, 2020 Share Posted July 8, 2020 It's just a matter of setting things up correctly including scoping the variables like I said. Note that I only cloned the first list item. You'll need to clone as many as are required to fill the entire viewport's width. Also note that I didn't add resize handling. See the Pen mdVLWQO?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
pietM Posted July 9, 2020 Author Share Posted July 9, 2020 Awesome. Thanks again for following up, Zach! I added the enclosed listener function, but when I resize the browser, the marquee accelerates its duration (but maintains the width!). - - window.addEventListener("resize", setPosition); setPosition(); - - See the Pen NWxMdpW by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 Hey piet. Unfortunately we don't have the capacity to build out the entire project for every person who posts in the forums. If you have a question related to GSAP we're happy to help Happy tweening. 1 Link to comment Share on other sites More sharing options...
pietM Posted July 10, 2020 Author Share Posted July 10, 2020 Thanks again, Zach. Hopefully my last GSAP-specific question for the thread: See the Pen NWxMdpW by euqio (@euqio) on CodePen I have a play(0); set on resize and just need to reset the totalDistance and clone. I've tried restating the animation and 'totalDistance' var, but the clone doesn't repeat on resize. After tinkering for hours, I still don't know what I'm missing here. Thanks again. M Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 Hey Piet. I'm not sure what you're expecting the .play(0) to do besides make the animation go to its start point. That's all it does To get things working on resize you need to update the distance and thus the tween: See the Pen gOPKGjo?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
pietM Posted July 10, 2020 Author Share Posted July 10, 2020 Thanks again for the follow up and continued assistance here, Zach! This really is a huge help. I really appreciate it and hope it helps others too. Okay, no more questions from me. This is exactly what I need. Thanks again, M 1 Link to comment Share on other sites More sharing options...
pietM Posted August 21, 2020 Author Share Posted August 21, 2020 Following up on this thread with a quick question. I've noticed on mobile that scrolling down resets the animation (calls the window resize function, playing the timeline from zero). Is there a way to avoid this, so the animations play without resetting on scroll? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 You could measure the change in the resize and only do stuff if it's over some minimum. Link to comment Share on other sites More sharing options...
pietM Posted August 24, 2020 Author Share Posted August 24, 2020 Thanks, Zach. That set me on the right path. Not entirely a matchmedia / media query solution, but this fixed the mobile issue for me: let cachedWidth = $(window).width(); $(window).resize(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ if(anim) anim.play(0); totalDistance = $(ticker).width() / 2; anim = gsap.to(ticker, { duration: dur, x: -totalDistance, ease: "none", repeat: -1, overwrite: true }); cachedWidth = newWidth; } }); Probably not the most elegant fix, but happy the timelines are preserved on scroll without resetting. Reposting if it helps anyone. See the Pen RwaKmOw by euqio (@euqio) on CodePen 1 Link to comment Share on other sites More sharing options...
informanimated Posted July 20, 2021 Share Posted July 20, 2021 How can the animation direction be reversed? On 7/10/2020 at 4:04 PM, ZachSaucier said: Hey Piet. I'm not sure what you're expecting the .play(0) to do besides make the animation go to its start point. That's all it does To get things working on resize you need to update the distance and thus the tween: Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 20, 2021 Share Posted July 20, 2021 Hey informanimated and welcome to the GreenSock forums. 13 minutes ago, informanimated said: How can the animation direction be reversed? You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation. 5 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 12, 2022 Share Posted January 12, 2022 On 7/20/2021 at 10:25 PM, ZachSaucier said: You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation. Hi @ZachSaucier, I've been hunting for ages and found this to be the closest ticker/marquee example to what I'm looking to achieve. Could I ask for a little more explanation of how to reverse the direction of one of the lines of text? Forgive me for one more question - Also looking to remove the click/drag functionality so it's just a straight constant animation... have studied the related helper function cross referenced your last pen in this thread with several other examples of this effect and I'm struggling to work these two things out, as every marquee method seems to be different/increasingly complex! Thanks in advance! Link to comment Share on other sites More sharing options...
OSUblake Posted January 12, 2022 Share Posted January 12, 2022 Hi @Mattrudd That should all be possible using our seamless loop helper function. https://greensock.com/docs/v3/HelperFunctions#loop See the Pen zYEModo by GreenSock (@GreenSock) on CodePen If you need any further help, please create a new topic. 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 12, 2022 Share Posted January 12, 2022 @OSUblake Thanks but I'm running before I can walk again - which is easy to do when being inspired by what others have achieved with GSAP! Will have another go at interpreting the helper doc further down the line. Link to comment Share on other sites More sharing options...
GreenSock Posted January 12, 2022 Share Posted January 12, 2022 1 hour ago, Mattrudd said: Will have another go at interpreting the helper doc further down the line. I didn't write the helper function with the goal of folks totally understanding everything in there - I wrote it mostly to simply provide the functionality and be efficient, so don't feel like you've gotta dissect it and understand every piece. Most helper functions are for people who are like "I need _____ but I can't figure out how to do it on my own...does GreenSock have something that could help?" So you can just copy/past the helper function and call it, feeding in whatever parameters it needs. Done. Good luck! Link to comment Share on other sites More sharing options...
Mattrudd Posted January 12, 2022 Share Posted January 12, 2022 26 minutes ago, GreenSock said: So you can just copy/past the helper function and call it, feeding in whatever parameters it needs. Done. Roger that, thanks! Trouble I'm having is I'm not yet at the GSAP mastery phase just yet to work out how to apply the effect to a second wrapper, or indeed to find the correct parameter for reversing this second instance Link to comment Share on other sites More sharing options...
OSUblake Posted January 12, 2022 Share Posted January 12, 2022 4 minutes ago, Mattrudd said: Trouble I'm having is I'm not yet at the GSAP mastery phase just yet to work out how to apply the effect to a second wrapper, or indeed to find the correct parameter for reversing this second instance You would just call the function again, but don't reverse the second one like I did in my demo. let loop1 = horizontalLoop(".box-1", { reversed: true, repeat: -1 }); let loop2 = horizontalLoop(".box-2", { repeat: -1 }); 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