Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
simo_sultan

React GSAP3 scrolltrigger text scroll from right to left

Recommended Posts

Hey GSAP Community. 

UPDATE: 
I have included the CodeSandbox below in a reply thanks to the great tip from Rodrigo that I can import it :D :D 


So the goal...to have the words PROJECTS and WRITINGS scroll from right side of page to left side of page fairly slowly on the scroll down. I also would like the word/heading to be pinned at the top ideally until the next section (writings) comes into view, then it will scroll up and probably even fade out. And then WRITINGS will scroll across as we're scrolling down and get pinned too for a short time or until the CONTACT div pops up into view or something. 
Both scrolling words will act the same. 

The issue. So I got the Projects heading to work as intended more or less, but I tried copying it over to the Writings header, thinking it would be the same, but it just keeps playing up and moving/skipping around and I have noooo idea why. I can't get it to be contained in the  'blue' blogs container.

Any and all tips are welcome as well.

Respective files and code to look into. 
ProjectList.js in src -> components -> projects
BlogsList in src -> components -> blogs

Let me know if people need more info to go on. It 

Thanks in advance.
Simon

Link to post
Share on other sites

Hey Simon. 

 

55 minutes ago, simo_sultan said:

I know I am supposed to create a Codepen or a CodeSandbox, but there's so many components interacting I thought it would just be easier to just share the repo for people to fork.

Easier for you, yes. But not easier for us (the people who are offering to help you for free). At the moment it's impossible for us to say what the issue is given the lack of information, sorry. If you'd like debugging help please make a minimal demo.

 

If that's too much work for you, you might consider hiring someone to help you. We have a forum for requests like that.

Link to post
Share on other sites

Hey @ZachSaucier,

Ah that's ok. I will make a small demo then in the coming days when I get time, that's all good. I know now haha.
I saw someone else do this what I did above and thought it might be easier here too. 
Will update when I get the chance to do it. 

Cheers again 👍

Link to post
Share on other sites

Just an FYI, you can import a github public repo to codesandbox directly:

 

https://codesandbox.io/docs/importing#import-from-github

 

So you can create a new repo, add a new remote reference in your local machine, then push a specific branch (so you can push only what you need) and then merge it to the master branch in that remote.

 

Happy Tweening!!!

  • Like 2
Link to post
Share on other sites

That is bloody brilliant thank you @Rodrigo! Massive timesaver!

Here's the CodeSandbox Link.
https://codesandbox.io/s/laughing-carson-9hjbc

Relevant files:  src -> projects-> Projects.js (for projectCont ref) and ProjectList for the timeline for 'projects'
And src -> blogs -> Blogs.js (for blogCont ref) and BlogList for the timeline for 'writings'


So I am back at it again tonight. I am a  little closer to my goal but still not sure why certain things happen yet, if it possible to gain some clarification that would be amazing please. 

So, currently the word Projects in that section is working close to intention. I would like it to scroll from right to left as I scroll down over the project list (which will get longer as well), and I would like it to fade in as well (I have it set from 0.1 to 0.3 opacity). Then I would like it to stay pinned and disappear underneath the blue container for writings/blogs.
The small issues I am getting currently on this one are:

- if you scroll slowly the opacity flickers, 

- on some start points the word jumps a little bit, 

- on devices smaller than desktop widths the word takes a long time to scroll in

My next issue, is that I copy /pasted the code from projects to apply it to the word writings, but I wasn't lucky with that. Issues:

- the word is pinned far too far down and then gets pinned at the wrong spot

- the opacity flickers here too (unsurprisingly as there is clearly something wrong from projects)

- the word sits all different places on different screen sizes (I would like it to eventually just sit underneath the footer box I have or maybe fade out, I haven't decided exactly what to do with it yet as I originally had the idea it would extend past the screen on the left so it scrolls the whole word, but I like how projects is currently handled, although as I don't have another container, I might need to push the word writings off the screen so it doesn't sit underneath the footer)

I am open to suggestions with ways to improve it by any means.

My current understanding of the timeline is that I initialize and pause the animation, then when it reaches certain positions on the screen I call the next animation. I am struggling to find solutions to my issues seeing as GSAP 3 and Hooks are 'new-ish'. This (unfinished) portfolio site is the one I would like to add to one of my 'projects' to be the one that I use to show industry as I am about to start job hunting soon in Brisbane Australia for my first industry job. Why I'm telling you this, is that any and all feedback is welcome so I can improve. 

Link to post
Share on other sites

There are a couple of things that stand out in your code. First you have a timeline that has a first .from() instance. This takes the element from the value you pass to the one it has before creating the animation. Then you have a couple of .to() instances. Have you tried this timeline without ScrollTrigger? Does it works as expected? Then you have a different ScrollTrigger instance for each timeline instance, why not just one ScrollTrigger instance for the entire timeline? If I was you I'd change the from instance at the start of the timeline and set the element's initial CSS to what you have in the first instance of the timeline and use a regular .to() instance. Then I'd use a single ScrollTrigger for the timeline, perhaps that is what's causing the problems, perhaps the start and end points of the ScrollTrigger's are conflicting in some way, also your code would be simpler to read and debug.

 

Finally is better to store your GSAP instances (and any other non-mutable element) using the useRef() hook rather than adding them to the component's state, since the latter triggers a non-needed re-render.

 

Happy Tweening!!!

  • Like 3
Link to post
Share on other sites

Hi @Rodrigo,

Thank you for the feedback. So I have been playing around tonight with your suggestions. I moved the timeline to useRef but I couldn't get it to work with the initial CSS properties and a.to(), however I did manage to get it to work with a.from() and ScrollTrigger on that instance. But this is only for desktop, haven't figured out how to make it responsive yet. 

However/Also, 
The word 'writings' just won't play nice at all in the BlogList. It scrolls past the bottom of the page, and I have tried hiding it behind the Footer but it just simple won't hide either. I would like it it to work like the Projects one. Do you have any guidance here at all sorry?

Here is the updated sandbox.
https://codesandbox.io/s/inspiring-field-btjwc

Cheers.
Simon.

Link to post
Share on other sites

Mhh... that's mostly CSS and I'm far from being a CSS expert, normally I use pre-made frameworks like Bootstrap or Tailwind. Normally my workflow is to create the layout in mobile first, then work up the screen size. When that is done if I'm working on React or Vue I start working with the reactive data changes to see how the layout behaves. When all of that is done I add the GSAP animations. Of course in the first step, I do consider what the animation will do to the DOM nodes in order to avoid critical CSS changes when I create the animations in order to reduce the amount of hairs I'll be pulling of my head when I create the animations ;).

 

My advice would be to remove GSAP completely from that part of the page and just work on the layout. Remember that with devtools (in any major browser) you can edit and change your styles in order to see the effect of updating certain properties, so that would give you a way to preview of how things could look when you add GSAP to the mix.

 

I know is not a direct solution, but is the best I can do now.

 

Happy Tweening!!!

  • Like 1
Link to post
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.

×