Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eZoulou

timeline start

Recommended Posts

Hi Folks,

This is my first GSAP project and I'm delighted.

Here is an issue I've got since a couple of days so I figured I'd ask for help :

I did expect the #intro to be hidden only when the red_timeline starts (so when #screen_red enters viewport).

But in practical, the red_timeline starts as soon as page loads.

Any advice?

Cheers,

Florent

 

See the Pen QWgoeyg by eZoulou (@eZoulou) on CodePen

Link to comment
Share on other sites

Welcome to the forums @eZoulou

 

Your timeline really isn't starting immediately. You just a have a set call at the start of it, which will set it immediately. You could add a little delay to it like...

.set('#intro', { display : 'none' }, 0.0001);

 

Or use the onToggle callback to change the intro however you'd like.

 

Link to comment
Share on other sites

Thanks for the answer. The little delay hack does not quite work but the onToggle is promissing. I'll get back if needed.

Cheeers, F

  • Like 1
Link to comment
Share on other sites

It will work if you add more to the timeline, which I assuming you were going to do?  

 

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

 

  • Like 1
Link to comment
Share on other sites

OK I got it now.

It's getting better but I still have a rewind (scrub) issue : the h2.xl titles won't come back when I scroll back up.

Here is a more complete example :

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

Thanks for the attention,

F

 

Link to comment
Share on other sites

It looks like you have a bunch of nested timelines with ScrollTriggers. Check out the most common ScrollTrigger mistakes...

 

So you probably don't need a master timeline. Just make every timeline with a ScrollTrigger independent.

 

  • Like 1
Link to comment
Share on other sites

I already checked the common mistakes ;-) 

But I'll check again.

Anyway I removed the main timeline (I did read somewhere it was better this way) but still the titles won't re-appear...

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

Link to comment
Share on other sites

Can you simply your demo some? There's a lot of stuff going on, and I'm not sure what stuff you're referring to. Thanks.

Link to comment
Share on other sites

Fair enough ;-)

Here it is . It's about the #intro h2.xl apparition effect not reverting well while scrubbing (scrolling back up).

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

Thanks a lot for the attention.

By the way, as well as I would like to understand the reason of the 'bug', I have found a workaround by using a callback :-)

onLeaveBack: () => {
  // Workarround scrub not showing back titles.
  gsap.set('h2.screen'+ (i+2), { display : 'block'}, 0.0001);
}

 

Link to comment
Share on other sites

Hey Ezoulou,

 

You have inline display properties on some things and a lot of set calls trying to override these styles. Neither of these seem necessary - I recommend against inline styles too as they're very high specificity. Best to just keep all the styling in your stylesheet.

The timelines are also a little confusing, I assumed one timeline was controlling the text animations and one was controlling the images but you have the text fades controlled in both timelines, so there's some conflicts going on. (h2.screen2)

You're also using empty tweens for spacing. I suggest looking into the position parameter instead.

I've broken your demo down into the individual parts so there's one timeline for text and one for the intro.
I've got rid of a lot of conflicting set calls and simplified it a bit. Rather than toggling display on the text you can position the text on top of each other with position absolute which saves repeating 'Nous sommes' multiple times.

Hope this helps.

See the Pen oNwRgER?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Cassie, Thank u for taking the time to answer. Really much appreciated :-)

I'm looking into that now.

  • Like 1
Link to comment
Share on other sites

Here it goes, a simplier demo inspired by your proposal :

See the Pen yLXWKra by eZoulou (@eZoulou) on CodePen

Any idea on how to :

1/ have #screen2 sccrollTrigger (and further screens) starts only after the intro text effect has ended?

2/ have titles (h3.screen2, h3.screen3 etc) start showing before the previous one is fully hidden? (I tried pinSpacing: false to shorten the delay between appearance/disapearance).

Regards,

F

 

  • Like 1
Link to comment
Share on other sites

I've found a solution for #1 that works ok.

I added a margin-top in css + set start to 'top 50%'.

See the Pen Pojvdpo by eZoulou (@eZoulou) on CodePen

Link to comment
Share on other sites

 

3 hours ago, eZoulou said:

2/ have titles (h3.screen2, h3.screen3 etc) start showing before the previous one is fully hidden? (I tried pinSpacing: false to shorten the delay between appearance/disapearance).


If I understand correctly, in order to 'overlap' animations you either need to make sure the start and end triggers of each section are right next to each other or potentially use one timeline and the position parameter to overlap items.

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



(It's a lot easier to work these things out with a minimal demo)

  • Like 3
Link to comment
Share on other sites

Thanks, I'll use 2 different timelines synchonized : one for the images, one for the texts. Thanks for the tips.

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