Jump to content
Search Community

New timeline in onComplete() confusion

Valentin FLGT test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi! 

I discovered gsap two days ago and I already love it, I decided to redo my portfolio with it however I have a small problem that I can't solve.

At the end of my first timeline `loadingTimeline` I would like to start a new one that declares a ScrollTrigger in order to stagger my title in the other direction, then animate the scrolling of other sections ... However with my current implementation, the scrollTrigger is not taken into account.

I think I'm mixing everything up a bit, anyone have an idea? 

Thanks in advance community ! 

See the Pen NWLpWZZ by Doha3ris (@Doha3ris) on CodePen

Link to comment
Share on other sites

Hi @Valentin FLGT welcome to the forum!

 

I have changed some of your logic in JS and CSS. I've set the loading animation to be position: fixed; so that it will be just fixed while the animation is playing, you could look in to disabling the scroll while that is happening. 

 

Then when that animation is done I run a function myAnimation which will setup your ScrollTrigger animation. If you want to use ScrollTrigger you can't have certain parts of the timeline be with ScrollTrigger and others not. It's better to setup a timeline, setup ScrollTrigger for that whole timeline and just have all the items you want to animate be on that timeline. I've add some comments throughout your code, be sure to read through them. Hope it helps and happy tweening! 

 

See the Pen qBMrdLE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Side note: Never ever apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thank you very much for your answer @mvaneijgen, very precise and the comments as well as the links to the documentation are much appreciated!

 

If I understood your solution correctly, it would be possible to separate the title animation in two? Like after loading the title appears at the end of the first timeline, while a new one with a ScrollTrigger manages the scrolling and the other animations of my page?

 

Sorry for my stubbornness or if my question looks stupid, but it's really nice to have people to talk about it!

Link to comment
Share on other sites

  • Solution
6 minutes ago, Valentin FLGT said:

it would be possible to separate the title animation in two? Like after loading the title appears at the end of the first timeline, while a new one with a ScrollTrigger manages the scrolling and the other animations of my page?

 

Oh yeah sure, just add the text animation to the loading timeline and have the ScrollTrigger timeline do the things you want to happen on scroll. Keep in mind that having too many GSAP animation controlling the same element can cause conflicts, but in this case it should be fine. Hope it helps and happy tweening! 

 

See the Pen mdGWVqo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
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...