Jump to content
Search Community

Trying to Acheive a Text Carousel Effect

ebinabo test
Moderator Tag

Recommended Posts

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

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

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, 

 

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...