Jump to content
Search Community

Recommended Posts

Posted

Hello,

I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it.

Could you help me with this issue?

See the Pen bGPxxLj by Wiktor-Duda (@Wiktor-Duda) on CodePen.

Posted

Hi @vaksy welcome to the forum!

 

First of you should be splitting the element that contains the text, in your cause that is #teskst not .titleBurrowing. Also there was a lot of code that didn't seem to do anything in this demo, it is best to start a demo with just the relevant parts, so that it is easier for everyone to see what is going on. 

 

Due to you not splitting the correct element, there were no .linia being created, now it works and I've given your .linia class an overflow: hidden; so that the text clips like in the example. 

 

I would focus on the ScrollTrigger start and end triggers and play with them to have the animations come in when you think it looks good and then have another ScrollTrigger pin the whole section when it is fully in view. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

 

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

  • Like 1
  • Thanks 1
Posted

Hello, I simplified the code to make everything more readable, now I stopped at the text at the bottom, the animation on which it is based has two texts that will appear as part of scrolling, how to achieve this effect?

See the Pen oNrPRXe by Wiktor-Duda (@Wiktor-Duda) on CodePen.

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