Jump to content
Search Community

Horizontally moving separate elements using Timeline with ScrollTrigger

dzestis94 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi everyone! 

I was wonder does anyone know how I could achieve something like this: https://wearecomplexcreative.com/who-we-are/  (why us section).  I know that I will need to use ScrollTrigger and Timeline. 


For any advices, ideas or code snippets I would be very appreciated! 
 

UPDATED:

I added codepen with my progress so far. One more question appeared, how I could choose between two values. For animation by X axes I use random (-100, 100). But I want to have exact -100 or vice verca. It depends from which side animation starts.

See the Pen YzLZKyM by dzestis94 (@dzestis94) on CodePen

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

Hey @dzestis94 welcome to the forum! As stated already we don't have the resources to create the effect for you, but you could take a look at https://greensock.com/st-demos/, maybe something there already does something that looks like what you want.

 

But when you get the hang of it GSAP is really simple! The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. And if you're stuck just post back here with a demo and someone will surely help you out!

Link to comment
Share on other sites

  • dzestis94 changed the title to Horizontally moving separate elements using Timeline with ScrollTrigger

Ah, you've found the utils! Have you also seen gsap.utils.wrap(), that one does exactly what you discribe, it pick either or item from the list. You can give it a index to let it figure out which one it should get, so in this example I let it pick the first value based on the index and for the to tween I get the current index + 1 (so the second value) and this alternates through out the list. 

 

See the Pen MWGmqxK?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi @mvaneijgen Thank you for reply! This is exactly what I need! I just wondered is it possible to run animation randomly for every element. Because now 2, 4, 6, 8 comes from left to right and only after the first element reaches right side then 1,3,5,7,9 elements starts go from right to left. 
I would like to have first two comes form left to right and then maybe three elements starts from right to left. Ideally it would be great if they start randomly! 

Thank you! 

Link to comment
Share on other sites

All the animations start at the same time, but the once from the left start at -100 that is 100% to the left of the browser eg they are not visible. So I think you like to stay between 0 ,100 instead of -100, 100.

 

4 hours ago, dzestis94 said:

I would like to have first two comes form left to right and then maybe three elements starts from right to left. Ideally it would be great if they start randomly! 

That is not randomly. If you do random they could all come from the same direction. I would build a more elaborate wrap so that you have the control you want. const wrap = gsap.utils.wrap([-100, 100, 70, -20, -50, 70, -20, 50, 0, 40])  you can add as much numbers as you want, just play with these until you find something that works for you.

 

See the Pen zYjpPjw by mvaneijgen (@mvaneijgen) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

Hey @mvaneijgen ! 

I still have questions related this topic. 

So I want to have all the words positioned absolute. But every word will have different postition by Y axis.  For example first word will be  top 50% (in the middle of screen) second word would be 20% from top. This is what I have so far: . It would be great if the y axis value will not repeat for other words. 

And I have no idea how to fix this on mobile! 

Any ideas? 

Link to comment
Share on other sites

  • Solution

Then again, you don't want random, because random will be truly random and values can be the same. Why not also use a .wrap() for that? 

 

For mobile take a look at https://greensock.com/docs/v3/GSAP/gsap.matchMedia() you can write separate animations for any screen size like you do in CSS!

 

See the Pen YzLBbry by mvaneijgen (@mvaneijgen) on CodePen

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