gsap Horizontal Timeline Scroll Parallax

[Sukru 6 Likes (Newbie)]

Hello, I made a copy for the gsap animation in the sample codepen link. But it doesn't work like the effect example, it takes the styles but there seems to be a shifting problem. Can you help me?

 

Example;

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

 

My Pen;

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

[Cassie 5,412 Likes (Superhero)]

Heya! If you're planning on scrolling vertically and triggering animations within a horizontally scrolling container - I think you may be looking for containerAnimation?
 

 

[Sukru 6 Likes (Newbie)]

@Cassie Yes, can you help with codepen?

 

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

[Cassie 5,412 Likes (Superhero)]

Sure thing, here you go

See the Pen oNyGxwJ?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Here's more info!

 

 

[Sukru 6 Likes (Newbie)]

Thank you very muchh  @Cassie

[Sukru 6 Likes (Newbie)]

@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

 

[Rodrigo 5,436 Likes (Superhero)]

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!

[AmelG 0 Likes (Newbie)]

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

[GSAP Helper 99 Likes (Contributor)]

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. 

[Cassie 5,412 Likes (Superhero)]

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

That should give you all the info you need!

 

 

Full CodePen demo:

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

Demo used in the video:

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

ScrollTrigger:

 

[AmelG 0 Likes (Newbie)]

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 

[AmelG 0 Likes (Newbie)]

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!

[Rodrigo 5,436 Likes (Superhero)]

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!