ebinabo Posted December 31, 2019 Share Posted December 31, 2019 Hello, I'm trying to achieve a text carousel effect like the one on the See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen page. I've tried to copy the code from there as well as a few other things that didn't work. The 414 there is the explicit size of the scroll width I was trying it out on a mobile screen size. Would love to be able to do this. See the Pen NWPajBR by ebinabo (@ebinabo) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted December 31, 2019 Share Posted December 31, 2019 Hey @ebinabo, Welcome to the GreenSock Forum. Here is another example of the seamless loop: See the Pen qBEXzOe by mikeK (@mikeK) on CodePen See the Pen ExawmqO by mikeK (@mikeK) on CodePen Happy tweening - next year ... Mikel 2 Link to comment Share on other sites More sharing options...
ebinabo Posted January 2, 2020 Author Share Posted January 2, 2020 Hi Mikel, Thank you for your response. I have to read through the css to understand it better. I tried to implement it in the code and I haven't been able to get it to work yet but I'm still on it. Regards, Ebinabo Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2020 Share Posted January 2, 2020 Hey @ebinabo, Maybe this example (a longer sentence) will help you ... See the Pen xxbXjOO by mikeK (@mikeK) on CodePen Question to the experts: Why can't I use var in a relative value? x: "+=2430", //move each box modulusValue to RIGHT x: "+=modulusValue", Kind regards Mikel 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 2, 2020 Share Posted January 2, 2020 10 minutes ago, mikel said: Question to the experts: Why can't I use var in a relative value? x: "+=2430", //move each box modulusValue to RIGHT x: "+=modulusValue", Because that's a literal string, not a variable. But you could certainly do this: x: "+=" + modulusValue, 2 Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2020 Share Posted January 2, 2020 Thanks Jack, A note in the docs would be very helpful for me, JS dyslexic. Relative values Use a"+=" or "-=" prefix to indicate a relative value. For example, gsap.to(".class", {x:"-=20"}); will animate x 20 pixels less than whatever it is when the tween starts. {x:"+=20"} would add 20; {x:"+=" + var} would add the value of this variable. 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