Jump to content
GreenSock

Mukhriddin

How can I move texts from right to left or vice versa

Go to solution Solved by akapowl,

Recommended Posts

The thing I wanted to implement here is to animate texts from left to right and vice versa. I mean the first and third texts from left to right, the second and fourth ones from left to right. They are gonna move according to scroll position. Please, let me know what do I do wrong here.

See the Pen xxYWWwq by Mukher (@Mukher) on CodePen

Link to comment
Share on other sites

Hello @Mukhriddin

 

First of all you should make sure to even have some scrollable space. I added some spacer divs here to make up for that.

 

In your example you are only looping over all of the ul, of which you only have one. Looping over the ul would make sense if you had more than one (so I kept it that way in case you want to expand using this in multiple occasions on the page). What you will additionally need to do is loop over all of the textLines you have in that ul and set the values to tween from and to up according to their index, not the index of the ul.

 

To get ALL the texts in one section, use .querySelectorAll instead of .querySelector (also to get all the ul in the first place)

 

// will only get the first one
const textLine = section?.querySelector(".background-text__item");

// will get them ALL
const textLine = section?.querySelectorAll(".background-text__item");

 

That should already work better

 

See the Pen PoQReYY by akapowl (@akapowl) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Thanks @akapowl.

And how could I make them keep moving untill they leave the viewport?

Link to comment
Share on other sites

15 minutes ago, Mukhriddin said:

And how could I make them keep moving untill they leave the viewport?

 

If you want them to keep moving until the ul is out of view to the top, you'll want to adjust the end value of the ScrollTriggers.

 

Since the triggger element is the ul itself, you could set the end to 'bottom top' which would translate to "end when the bottom of the trigger element hits the top of the window". According to the same principle you could also make them start when the ul enters the viewport via a start: 'top bottom'.

 

Then they would start tweening when the enter the window from the bottom, but for them to instantly become visible at that point you will probably have to tweak your calculations from where to tween.

 

See the Pen MWQVGZX by akapowl (@akapowl) on CodePen

 

Link to comment
Share on other sites

Thanks. But, the thing I want was a little bit different. I meant these text lines moves from left to right, and from right to left horizontally(translateX) , i.e, no move towards up. They are transforming ontranslate3d base currently.

Link to comment
Share on other sites

  • Solution

 

Sorry, but now I'm totally confused about what you mean. Do you maybe have an example of what you are trying to achieve, or could you clear up your question a bit for me?

 

10 minutes ago, Mukhriddin said:

I meant these text lines moves from left to right, and from right to left horizontally(translateX) , i.e, no move towards up. They are transforming ontranslate3d base currently.

 

If you don't want them to scroll while tweening, you could pin the ul. And if you don't want translate3D to be used, you could set force3D: false on the tweens.

 

Also, what I saw just now is that you do have a transition: 1s ease-in-out all set via CSS on your .background-text - you shouldn't put transitions like that on elements that are going to be tweened on with GSAP as this will create conflicts.  

 

See the Pen abqYKzg by akapowl (@akapowl) on CodePen

 

 

 

But as I already mentioned, I don't really understand what it is you are asking.

 

If you don't want the ul to move vertically at all (not even scroll), you will have to make sure to somehow set it up like that but still allow for scrollable space. I put the ul in a fixed wrapper here (which centers it via flex) and added a height to the body to make sure things are scrollable. The body also is the trigger for the ScrollTrigger here, which is attached to a timeline that first tweens the texts in and then later after a little scrolling tweens them out again to the other side (spaced out via the position parameter).

 

See the Pen xxYWzpw by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

What I expected is your second example. Thanks a lot! 

P.s: It worked only after I removed target next to  index 

See the Pen YzeaOWM by Mukher (@Mukher) on CodePen

 

And one more thing, refreshing the page causes elements to lose these styles(transform: tranlate) on my real project(not on pen!). What can be the reason for that?!

Before refreshing page

image.png.15d806245467006c5253eca926a8083d.png

 

After refreshing page

image.png.0ad4f013d99b3f879c2d80263e870306.png

 

As a reason, text lines lose transforming feature while scrolling, they are located at center

Link to comment
Share on other sites

GSAP adds those styles - If you refresh the page the previous animation doesn't persist. It'll start again from a clean slate

Link to comment
Share on other sites

 

As you said, that doesn't happen in the codepen demo - so I really can't tell.

 

But what you shouldn't be doing is adjusting the durations of the tweens in the timeline's defaults without also adjusting the position parameter of the tweens in the timeline. If you scroll slowly, you can notice an ugly jump in your codepen.

 

 

Link to comment
Share on other sites

49 minutes ago, Cassie said:

GSAP adds those styles - If you refresh the page the previous animation doesn't persist. It'll start again from a clean slate

So how it can be avoided? Even from the foremost start, GSAP doesn't add styles. After  editing some code, it gets to start and by refreshing I lose thes styles again.

P.s: I can't insert video of my screen as of its size

Link to comment
Share on other sites

 

If you can provide a minimal demo, we'll be happy to help - but it isn't really possible to tell what's wrong without knowing what you are doing - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Even a video might not provide enough information for us to help you out - and it also doesn't let us tinker with things ourselves, so a minimal demo would really help us help you.

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox helpful to create a demo. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

  • Like 1
Link to comment
Share on other sites

Thanks for the effort. 

I'm using React. I found the bug:

Animation codes need to be included inside component. Something like this

import React from 'react';
import {gsap} from 'gsap';

export const Component = () => {
	// animation codes
  
  return(...)
}

The thing I did wrong was that I wrote animation codes outside component.

Link to comment
Share on other sites

 

Great to hear you've got it working :) 

 

For future reference you might also want to be interested in the guides on GSAP with React. Happy tweening!

 

 

 

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