Jump to content
GreenSock

Vineeth Achari

Marquee without loop one time scroll

Recommended Posts

Hey,

 

Here is the marquee I created. When I open the site, this marquee should scroll once, but I couldn't find out how to create it without looping.
 

See the Pen ZExWrWo by vineethachari (@vineethachari) on CodePen

Link to comment
Share on other sites

I'm not sure I understand.

 

gsap.to(text, {
	xPercent: 100
})

That alone should do what you want.

Link to comment
Share on other sites

Yeah, I'm in the same boat as @SteveS - I don't understand what exactly you're asking or what your goal is. But you may want to check out the helper function in the docs for seamlessly looping things on the x axis. 🤷‍♂️

Link to comment
Share on other sites

i just want to scroll this onetime means this is suppose to comes in the hero banner of the landing page. if we are opening the site first time it should scroll only in the first time then its disappear.

 

now its keep scrolling.....

Live-Breathe-and-Spread-Film (1).png

Link to comment
Share on other sites

I'm sure I'm missing something obvious, but like @SteveS said wouldn't it be as simple as this?:

gsap.to(".typography-headline-hero", {
  xPercent: -100,
  duration: 6,
  delay: 0.2,
  ease: "none"
});

And if you only want that to happen the first time someone visits, then use a localStorage variable or cookie or something and tuck it inside a conditional statement.

Link to comment
Share on other sites

Fantastic! It works fine.

I just wanted to clarify that the text now appears at the center of the page. It should begin on the right side of the screen. I've changed the delay/duration, but nothing seems to be working. 

 

See the Pen ZExWrWo by vineethachari (@vineethachari) on CodePen

 

Much appreciated!

Link to comment
Share on other sites

I think you mean you'd like it to start off screen? If yes:

 

See the Pen poLPBra by kabocreative (@kabocreative) on CodePen

 

I added:
gsap.set(".typography-headline-hero", {
  xPercent: 100,
});      

I'm a newbie to GSAP, so others might have greater ideas!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@kabocreative we love when "newbies" like you jump in and offer some ideas. That's exactly how you'll be come an expert! And it always makes the community richer and more well-rounded when a diversity of people contribute, even if the answers aren't "perfect". So keep it up! 🙌

 

If I understood correctly, it should be as simple as a .fromTo() that goes from xPercent: 100 to xPercent: -100:

See the Pen wvmdZye?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for @Vineeth Achari?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

This is what i'm looking for...

Thanks a lot @kabocreative and @jack

  • Like 1
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.
×