Jump to content
Search Community

Horizontal Timeline Scroll Parallax

Sukru test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

@Cassie I'm sorry again, how can I do the text effect with the scrolltrigger in this structure?

 

Code;

 

const myText = new SplitType('#my-text')

        gsap.to('.char', {
            y: 0,
            stagger: 0.05,
            delay: 0.2,
            duration: .1
        })

 

Codepen

See the Pen RwyMePX by designcourse (@designcourse) on CodePen

 

 

My pen;

See the Pen abKLNGR by sukruemanet (@sukruemanet) on CodePen

 

Link to comment
Share on other sites

Hi,

 

A couple of things. SplitType is not a GSAP product so we can't use our time to support it, that doesn't mean that you are not able to use it with GSAP as the example you posted clearly shows that. GSAP has the SplitText Plugin for that type of effects which is a Club GreenSock benefit. Also you are not including SplitType in your project so you are getting an error.

 

Finally just add that particular animation in the timeline of the corresponding section you want to see it in and that should do the trick. Be sure to split the text before that and not after creating the ScrollTrigger instances like you are doing now. I can't tell exactly which section that is from your code, but I'm sure that you do.

 

Happy Tweening!

Link to comment
Share on other sites

  • 3 months later...

Hello @Cassie

While looking for a way to build and animate the section below, I came across this thread and your reply to Sukru. I feel that there is here for me a beginning of answer, but I confess that it still remains complicated in my mind. Would you by any chance have some ideas for me? 

thank you very much

1068146426_Capturedcran2023-02-22223916(1).thumb.png.bf4b73e344f4105dffbf86e90811f60d.png

Link to comment
Share on other sites

Hi @AmelG and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

3 hours ago, GSAP Helper said:

Hi @AmelG and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

Thank you!
My problem is that the site is on Webflow and I can't easily export the CSS. So, my codepen doesn't look like anything :( Here is the link of the page as is : https://heroine.webflow.io/wip/methode-copy 

Link to comment
Share on other sites

1 hour ago, Cassie said:

Have you watched this video and checked out the linked demos? 

That should give you all the info you need!

 

 

Full CodePen demo:


Demo used in the video:

 

ScrollTrigger:

 

Thank you!
Yes I had seen this information, but I can't transpose in the case where all my pillars are in the same panel, to have a pause once my pillar reaches the top position, before going back down and the animation continues in the same way on the following pillars. 
I'm really sorry I can't do a Pen, it would be easier. Thanks anyway!

Link to comment
Share on other sites

Hi,

 

Without a minimal demo that we can tinker with is really hard for us to troubleshoot any issue. A live site doesn't allow us to see the HTML/CSS/JS of the part that causes the problem.

 

I poked around your site (looks really nice by the way, great job!) and I see that in this URL the pillars are looking really nice:

https://heroine.webflow.io/

 

In this URL you also have some scroll/controlled animation of the pillars:

https://heroine.webflow.io/methode

 

So I'm a bit confused about what exactly is the problem you're having and what's the goal you have in mind.

 

The more specific you are (show some images or flows that indicate what you want) and if you can create a minimal demo of it, better is the chance of getting some help.

 

Happy Tweening!

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